JQuery FadeIn и FadeOut глючит при наведении изображения - PullRequest
Новая
       15

JQuery FadeIn и FadeOut глючит при наведении изображения

1 голос
/ 27 мая 2010

У меня есть четыре изображения на странице, которые при наведении на них должны заменить основной текст соответствующим текстом, относящимся к этому изображению. Работает но глючит. Если я медленно переворачиваюсь и скатываюсь медленно, я получаю желаемый эффект. Когда я быстро переключаюсь, показывается содержимое div. Вот сокращенная версия того, что мне нужно делать. 

<img src="btn-open.gif" class="btn" />
<div class="mainText">
<h1>Main text</h1>
<p>Morbi mollis auctor magna, eu sodales mi posuere elementum. Donec lacus lorem, vestibulum sed luctus ac, tincidunt sit amet eros. Nullam tristique lectus lobortis nibh pharetra placerat. Aliquam quis tellus mauris. Quisque eu convallis elit. Sed vitae libero est. Suspendisse laoreet magna magna, vitae malesuada diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce eros ipsum, interdum et volutpat sed, commodo aliquam odio. Maecenas auctor condimentum mi. Maecenas ante eros, tristique nec viverra sed, molestie sit amet nulla. Suspendisse vitae turpis ac felis rutrum interdum.</p>
</div>
<div class="replacementText">
<h1>Replacement text</h1>
<p>Nulla ac magna nec quam cursus mollis eget a nulla! Vestibulum quis nibh ipsum, ut vehicula leo. Etiam ac felis suscipit mi semper vehicula. Praesent est mi, suscipit sit amet bibendum at, porta quis elit. Integer lectus est, consequat non sodales ac, pharetra sit amet tellus. Suspendisse porttitor massa a dolor suscipit sed ullamcorper ipsum vehicula. In malesuada augue sit amet ante volutpat euismod. Ut vel felis sed enim placerat ultricies. Aliquam erat volutpat. Vivamus rutrum; ante vitae euismod accumsan, felis odio lacinia magna, eu viverra nisl metus non ligula? In metus nisi, viverra vel scelerisque non, ullamcorper sed arcu? In hac habitasse platea dictumst. Donec laoreet dapibus quam vitae pulvinar. Morbi ut purus nisl. Nulla eu velit ipsum; vel mattis magna. Aenean sodales faucibus dapibus.</p> 
</div>


$(document).ready(function() {

$(".btn").hover(
function() {
    $(this).css({ cursor: "pointer" });
    $(".mainText").hide();
    $(".replacementText").slideDown("slow");
},
function() {
    $(".replacementText").hide();
    $(".mainText").slideDown("slow");

});

});

Ответы [ 2 ]

0 голосов
/ 29 мая 2010

При скрытии элементов необходимо отменить (.stop()) анимацию противоположного слайда, которая происходит, чтобы они мгновенно исчезали при смене наведения, например: 

$(".btn").hover(function() {
    $(".mainText").stop(true, true).hide();
    $(".replacementText").slideDown("slow");
}, function() {
    $(".replacementText").stop(true, true).hide();
    $(".mainText").slideDown("slow");
}).css({ cursor: "pointer" });

Также я переместил вызов .css() ... вы все равно видите результат cursor: pointer при наведении, так что нет необходимости применять его каждый раз, и, честно говоря, это следует переместить все путь к таблице стилей для точно такого же эффекта, как это: 

.btn { cursor: pointer; }
0 голосов
/ 27 мая 2010

Предлагаю вставить задержку в тайник, что-то вроде: 

var timeout;
$(document).ready(function() {
    $(".btn").hover(
        function() {
            clearTimeout(timeout)
            $(this).css({ cursor: "pointer" });
            $(".mainText").hide();
            $(".replacementText").slideDown("slow");
        },
        function() {
            timeout = setTimeout(function(){
            $(".replacementText").hide();
            $(".mainText").slideDown("slow");
            },250);
        });
});
...