Появление JQuery с исчезновением указателя мыши и отсутствием эффекта - PullRequest
Новая
       45

Появление JQuery с исчезновением указателя мыши и отсутствием эффекта

0 голосов
/ 31 мая 2011

То, что я пытаюсь сделать, - это эффект постепенного изменения нагрузки при загрузке страницы, затем приятное постепенное исчезновение и эффект при наведении мыши на каждый отдельный элемент, вы можете увидеть, что у меня работает: 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>

Ответы [ 3 ]

0 голосов
/ 31 мая 2011

Вы назначаете слушателя "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 (...), равный $ (...), просто поместите функцию в вызове $ (...)

0 голосов
/ 31 мая 2011 
<script type="text/javascript"> 
$(document).ready(function() {

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

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


});
</script>




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

<script type="text/javascript">

$ (документ) .ready (function () {

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

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





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

});

0 голосов
/ 31 мая 2011

Возможно, вы ищете это? 

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

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

...