Question

我最近更新了我的旧javascript以与Jquery合作。

它执行以下操作：

当用户将鼠标悬停在类content-fade的链接上时，会导致内容与关联的id淡入，然后在设定的时间内淡出，除非用户将鼠标悬停在内容。

我需要再次更改脚本并让它循环遍历一组id s又名id1，id2，id3 ......等。理想情况下，仅显示具有个别关联ID的内容。我刚刚开始使用JQuery，我不确定如何最好地解决这个问题。如果有人能指出我正确的方向我会很感激，代码如下。

  $(document).ready(function() {
        var hide = false;
        $(".content-fade").hover(function(){
            if (hide) clearTimeout(hide);
            $("#id").fadeIn();
        }, function() {
            hide = setTimeout(function() {$("#id").fadeOut("slow");}, 250);
        });
        $("#id").hover(function(){
            if (hide) clearTimeout(hide);
       }, function() {
            hide = setTimeout(function() {$("#id").fadeOut("slow");}, 250);
        });
 });

Answer 1

如果我理解你的要求，你就走在了正确的轨道上。

通过在数据属性（data-hover-target）
在mouseenter（悬停）上，淡化目标元素。
开启mouseleave延迟退出目标
Clear the animation queue用于mouseenter上的目标元素，以防止fadeOut挂起。因此，如果用户将光标移离链接，则立即再次返回 - 在延迟的fadeOut开始之前 - fadeOut将被取消，目标元素将保持可见。

请参阅下面的代码和http://jsbin.com/uruzaw/11/作为工作示例。

$(function(){

  $('.content-fade').hover(
    // fadeIn on mouse
    function(event){
      var $this = $(this);
      var $target = $($this.data('hoverTarget'));
      $target.clearQueue().fadeIn(500);
    }, 

    // fadeOut on mouseout
    function(event){
      var $this = $(this);
      var $target = $($this.data('hoverTarget'));
      $target.delay(500).fadeOut(500);
    }
  );

});

编辑我想我误解了你的要求。如果您希望在链接和链接和内容时阻止内容的淡入淡出，则以下内容就足够了。它基本上是你所写的，但使用jQuery动画队列.delay()代替setTimeout()。见http://jsbin.com/uruzaw/13/

$(function(){

  var HOVER_DELAY = 1000;

  $('.content-fade').each(function(){
    var $this = $(this);
    var $target = $($this.data('hoverTarget'));

    var fadeTargetElem = function(){
      $target.delay(HOVER_DELAY).fadeOut(500);
    };

    // bind to mouseenter
    $this
      .mouseenter(function(event){
        $target.clearQueue().fadeIn(500);
      })
      // bind to mouseleave
      .mouseleave(function(event){
        fadeTargetElem();
      });

    // bind to mouseenter of target
    $target
      .mouseenter(function(event){
        $target.clearQueue();
      })
      // bind to mouseleave of target
      .mouseleave(function(event){
        fadeTargetElem();
      });
    });
});

Answer 2

如果您的id编号为，则简单的for循环可以解决问题。问题，如何首先是与他们的.content-fade对应关联的“ids”？该问题的答案将引导您找到解决方案。

如果每个.content-fade链接也设置了id attr，那么你可以解析它并在附加mouseenter / mouseleave事件时使用它。

说：

<a class="content-fade" id="link-1">Link 1</a>
<a class="content-fade" id="link-2">Link 1</a>

然后你可以像这样解析它：

var hide = false, id;
$(".content-fade").hover(function() {
    if (hide) clearTimeout(hide);
    id = this.id.split('-')[1];
    $("#id-" + id).fadeIn();
}, function() {
    id = this.id.split('-')[1];
    hide = setTimeout(function() {$("#id-" + id).fadeOut("slow");}, 250);
});

这当然意味着必须管理所有不同的超时。

Answer 3

要遍历所有这些ID，您需要为所有这些元素添加一个类，并使用each

在每次迭代时执行操作

Jquery淡入和淡出循环

3 个答案: