JQuery исчезает, с эффектом плавного появления и исчезновения мыши

что я пытаюсь сделать, так это эффект затухания при загрузке страницы, затем красивое затухание и действие при наведении курсора мыши на каждый отдельный элемент, вы можете увидеть, что у меня работает здесь: http://themes.thefragilemachine.com/themachine_v4/

Я знаю, что это можно сделать с помощью дочернего вызова? я просто не уверен, как это сделать, но в основном я хотел бы иметь 1 класс, который я могу применить к действительно любому div и заставить его использовать эффект, по крайней мере, для мыши, любая помощь была бы потрясающей! Спасибо!

вот мой код JQuery:

<script type="text/javascript"> 
    $(document).ready(function() {

        window.onload = function() { $('.test1').hide().fadeIn(1500); };

        $('.test1').mouseover(function() { 
            $('.test1').fadeOut('fast').fadeIn('slow'); 
        });
    });
</script>

вот мой HTML-код:

<div class="featured-pitem g_4 test1"></div>
<div class="featured-pitem g_4 test1"></div>
<div class="featured-pitem g_4 test1"></div>
<div class="featured-pitem g_4 test1"></div>
<div class="featured-pitem g_4 test1"></div>
<div class="featured-pitem g_4 test1"></div>

jquery children fadein fadeout fade
person The Fragile Machine    schedule 31.05.2011    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Вы, наверное, ищете это?

$('.test1').mouseover(function() {
    $(this).fadeOut('fast').fadeIn('slow');
});

Использование $(this) должно применять эффекты затухания только к текущему элементу, использование $('.test1') применяет эффекты ко всем элементам с классом test1.

person mu is too short    schedule 31.05.2011
comment
классно! Спасибо! быстрый вопрос, есть ли способ применить вызов $(this) к странице, исчезающей для каждого элемента? чтобы каждый элемент исчезал последовательно, а не все сразу? - person The Fragile Machine; 31.05.2011

arrow_upward
0
arrow_downward

Вы назначаете слушателя "window.onload" внутри document.ready. Но document.ready срабатывает после window.onload, поэтому ваш код не имеет никакого эффекта. В любом случае, когда окно загружено, DOM еще не загружен, поэтому нет элементов для выбора. Вы должны переписать его примерно так:

$(document).ready(function() {

$('.test1').hide().fadeIn(1500);
$('.test1').mouseover(function() { $('.test1').fadeOut('fast').fadeIn('slow');  } );


});

Кстати, для jQuery есть хороший ярлык $(document).ready(...) equals $(...), просто поместите функцию в вызов $(...)

person Juriy    schedule 31.05.2011

arrow_upward
0
arrow_downward 

<script type="text/javascript"> 
$(document).ready(function() {

    $('.test1').hide().fadeIn(1500);

    $('.test1').mouseover(function() { $(this).fadeOut('fast').fadeIn('slow');  } );


});
</script>




Для последовательности затухания вы можете использовать что-то вроде этого:

<script type="text/javascript">

$(документ).готовый(функция() {

$('.test1').hide();

$('.test1').each(function(i){
        var timing = i*2+60;
        $(this).delay(timing).fadeIn(1500);
});





$('.test1').mouseover(function() { $(this).fadeOut('fast').fadeIn('slow');  } );

});

person AlexC    schedule 31.05.2011
comment
классно! Спасибо! быстрый вопрос, есть ли способ применить вызов $(this) к странице, исчезающей для каждого элемента? чтобы каждый элемент исчезал последовательно, а не все сразу? - person The Fragile Machine; 31.05.2011