1

到目前为止，我有fadeIn工作，但fadeOut一直不太正确。现在，一旦鼠标离开悬停区域，看起来根本没有发生任何fadeOut事情。我希望在下一个动画（下一个fadeIn）开始之前完成平滑的淡出，并且不会排队。基本上这是在<span>标签内的一些链接上。我现在在家里！

PS 我知道我没有使用.hover. 我宁愿现在坚持使用mouseoverand 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>

编辑：2011 年 8 月 18 日

我意识到可能存在与上述脚本冲突的脚本。我在同一页面上运行了一个额外的 jquery 脚本。它本身工作正常，但是当我为文本框（上方）添加脚本时，图像和文本上的 .fadeOut 都会被忽略或至少不一致。

第二个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

4 回答 4

1

没有这$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);
});

编辑：

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淡入之前完全淡出。

于 2011-08-18T03:03:30.517 回答
0

您不必使用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);
});
于 2011-08-18T03:11:17.710 回答
0
  1. 将所有内容放在文档就绪事件中
  2. 删除 $dequeue。
  3. 在fadeIn 和fadeOut 之前添加stop(true, true)

$(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);
  });
});

于 2011-08-18T03:18:53.013 回答
0

$dequeue 是错误的语法。它需要是$.dequeue 并被传递一个元素，即$.dequeue(elem)。此外，您没有使用队列语句，因此 dequeue 是不合适的。stop() 在两个淡入淡出上都是明智的。无需将任何参数传递给 stop() 默认应该可以正常工作。

于 2011-08-18T03:19:37.173 回答