jQuery fadeIn и fadeOut родства элемента

Я хочу создать конкретный div (первый родственный элемент определенного элемента) fadeIn и в конечном итоге fadeOut, когда мышь над/мышью из другого div. Дива, который должен исчезать, находится точно над другим. Я успешно создаю код для одного элемента с помощью $ (document) .ready(), но я хочу, чтобы были более затухающие элементы сбоку, и я не показывал их все сразу, поэтому мне пришлось изменить функции ,jQuery fadeIn и fadeOut родства элемента

Вот код функции:

function clenShow() { 
    $(this).next().fadeIn(1000); 
} 
function clenHide() { 
    $(this).next().fadeOut(1000); 
}

Вот это HTML:

<a class="clenove" onMouseOver="clenShow()" onMouseOut="clenHide()" href="page1.html" title=""> 
    <div class="clenovePhoto"> 
    </div> 
    <div class="clenoveText"> 
     <h2>Head text</h2> 
     <p>Content text...</p> 
    </div> 
</a> 
<a class="clenove" onMouseOver="clenShow()" onMouseOut="clenHide()" href="page2.html" title=""> 
    <div class="clenovePhoto"> 
    </div> 
    <div class="clenoveText"> 
     <h2>Head text #2</h2> 
     <p>Content text #2</p> 
    </div> 
</a>

Элемент, который должен исчезнуть в и это один с классом «clenoveText» Кто-нибудь знает какое-то простое решение?

источник

2015-02-02 user3831992

Какие элементы должны исчезать и вне дома? Кроме того, '.next()' не то, что вы хотите использовать здесь, и избегать встроенных обработчиков событий. – j08691

Какой элемент HTML вы хотите иметь fadein/fadeout? – Chanckjh

Элемент для затухания в и из него является тем, у кого есть класс «clenoveText» – user3831992

Хороший подход заключается в использовании класса для элемента парения и относительного селектора для собрата:

<img class="hover" src="http://placehold.it/100x100" /> 
<img src="http://placehold.it/100x100" /> 

$('.hover').hover(function() { 
    $(this).next().fadeOut(); 
}, function() { 
    $(this).next().fadeIn(); 
});

Demo

Обратите внимание, что нет никакого JavaScript в разметке этого путь, это лучшая практика.

источник

2015-02-02 20:11:08 isherwood

Я не уверен, правильно ли я вас понял, но вы можете использовать css3 вместо javascript.

Проверьте это здесь:

<a class="clenove" href="page1.html" title=""> 
    <div class="clenovePhoto"> 
    </div> 
    <div class="clenoveText"> 
     <h2>Head text</h2> 
     <p>Content text...</p> 
    </div> 
</a> 
<a class="clenove" href="page2.html" title=""> 
    <div class="clenovePhoto"> 
    </div> 
    <div class="clenoveText"> 
     <h2>Head text #2</h2> 
     <p>Content text #2</p> 
    </div> 
</a>

CSS:

.clenove * { 
    opacity: 0; 
    transition: opacity 1s; 
} 

.clenove:hover * { 
    opacity: 1; 
}

Пример: http://jsfiddle.net/DariuszMusielak/vv2knmxa/

источник

2015-02-02 20:11:45 Muszla

Это не показывает отношения родственников, как упоминается в вопросе. – isherwood

Вы должны дать элементы идентификаторы, которые будут упоминаться на JQuery. Затем добавьте функцию init после загрузки тела, которая определяет ваши обработчики.

HTML

<body onload="init()"> 
    <a class="clenove" id="page1" href="page1.html" title=""> 
    <div class="clenovePhoto"> 
     <img src="http://placehold.it/100x100" /> 
    </div> 
    <div class="clenoveText" id="fade1"> 
     <h2>Head text</h2> 
     <p>Content text...</p> 
    </div> 
    </a> 
    <a class="clenove" id="page2" href="page2.html" title=""> 
    <div class="clenovePhoto"> 
     <img src="http://placehold.it/100x100" /> 
    </div> 
    <div class="clenoveText" id="fade2"> 
     <h2>Head text #2</h2> 
     <p>Content text #2</p> 
    </div> 
    </a> 
</body>

function init() { 
    $("#page1").hover(function() { 
    $("#fade1").fadeIn("slow") 
    $("#fade2").fadeOut("slow") 
    }); 
    $("#page2").hover(function() { 
    $("#fade1").fadeOut("slow") 
    $("#fade2").fadeIn("slow") 
    }); 
}

источник

2015-02-02 20:24:21

ответ

Смежные вопросы