Проблемы с jQuery .fadeOut в FireFox 6.0 - PullRequest
Новая
       42

Проблемы с jQuery .fadeOut в FireFox 6.0

1 голос
/ 18 августа 2011

Пока у меня работает fadeIn, но fadeOut не совсем прав.Прямо сейчас, как только мышь покидает область наведения, это не похоже на то, что fadeOut происходит вообще.Я хотел бы иметь плавное затухание, которое завершается до начала следующей анимации (следующая fadeIn) и не ставится в очередь.В основном это касается некоторых ссылок, которые находятся внутри тегов <span>.Я сейчас нахожусь в доме!

PS Я знаю, что не пользуюсь .hover.Я бы предпочел придерживаться пока mouseover и mouseleave, или даже mouseout.Пожалуйста, ответьте на этот небольшой запрос. 

<script>
    $("a").mouseover(function () { 
        $("div").fadeIn(0, function () { 
            $("span").fadeIn(3000,0.0);
        }); 
        return false; 
    });  

    $dequeue;

    $("a").mouseleave(function () { 
        $("span").fadeOut(3000,0.0);
    });
</script>


<!DOCTYPE html>


<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>

<a href="#">MouseOver!</a>

<div>

<h3><span>Sample Text</span></h3>

</div>
</body>
</html>

Редактировать: 18.08.2011

Я понял, что может быть сценарий, конфликтующий с приведенным выше.У меня есть дополнительный скрипт jquery, работающий на той же странице.Само по себе это работает нормально, но когда я добавляю скрипт для текстового поля (выше), .fadeOut как для изображений, так и для текста, игнорируется или, по крайней мере, не согласуется.

2-й скрипт jQuery: 

<script>
$(document).ready(function(){

$(".latest_img").fadeTo("slow", 0.0);
$(".latest_img").hover(function(){
$(this).fadeTo(1000, 1.0).dequeue();

},function(){
$(this).fadeTo(1000, 0.0).dequeue();
});
});
</script>

Вот пример одной из четырех «целей», которая должна отображать текст и изображение для отображения (четыре текстовых поля сопровождают четыре изображения - каждое из них отображается при наведении курсора на цель).

HTML: 

<div class="gallerycontainer">
<div width="100%" height="30%">

<a class="thumbnail" href="#thumb"><h2 class="ftb" id="tg1">Target A</h2>

<span class="txspan">
<img src="img/ima.jpg" class="latest_img" id="images" />
<h3 class="text"><br>Textbox content for Target A</h3></span></a>

</div>
</div>

Ответы [ 4 ]

1 голос
/ 18 августа 2011

без $dequeue оба события работают

http://jsfiddle.net/pxfunc/y9qd6/

$("a").mouseover(function() {
    $("div").fadeIn(0, function() {
        $("span").fadeIn(3000, 0.0);
    });
    return false;
});

// remove $dequeue

$("a").mouseleave(function() {
    $("span").fadeOut(3000, 0.0);
});

EDIT:

http://jsfiddle.net/pxfunc/y9qd6/

var $a = $('a'),
    $div = $('div'),
    $span = $('span');

$a.mouseover(function() {
    $div.show();
    $span.fadeIn(1000);
}).mouseleave(function() {
    $span.stop(true, true).fadeOut(1000);
});

это должно работать так, как вы ищете, span полностью исчезает, а затем снова возвращается.

0 голосов
/ 18 августа 2011

$ dequeue - неправильный синтаксис. Это должен быть $ .dequeue и передаваемый элемент, т.е. $ .dequeue (elem). Также вы не используете состояние очереди, поэтому удаление очереди неуместно. stop () будет разумным для обоих замираний. нет необходимости передавать какие-либо аргументы для stop () по умолчанию должно работать нормально.

0 голосов
/ 18 августа 2011
  1. Поместить все в событие готовности документа.
  2. Удалите $.*</p> <pre><code>$(document).ready(function() { $("a").mouseover(function () { $("div").stop(true, true).fadeIn(0, function () { $("span").fadeIn(3000,0.0); }); return false; }); //$dequeue; $("a").mouseleave(function () { $("span").stop(true, true).fadeOut(3000,0.0); }); });

0 голосов
/ 18 августа 2011

Вам не нужно использовать dequeue.Используйте stop() вместо: 

$("a").mouseover(function () { 
    $("div").fadeIn(0, function () { 
        $("span").fadeIn(3000,0.0);
    }); 
});  

// using ".stop()" will stop the previous animation, and immediatly fade it out

$("a").mouseleave(function () { 
    $("span").stop().fadeOut(3000,0.0);
});
...