jQuery:延迟悬停直到第二次

时间:2014-12-19 20:46:45

标签: javascript jquery hover

在我的申请中,我有一个"关注"一旦他们点击另一个按钮我就会向用户显示的按钮"跟随",就像Twitter一样。

我的小问题是当用户点击关注后,我会显示"以下"按钮,它立即更改为"取消关注"因为那是我附加的悬停事件。一些代码来说明:

$('.following').hover(
  function() {
      var $this = $(this);
      $this.val("Unfollow");
  },
  function() {
      var $this = $(this);
      $this.val("Following");
  }
);

这是因为"以下"按钮显示,它最终在光标后面,因此触发悬停事件。我想要实现的是某种方式来延迟这个悬停事件,直到鼠标指针第一次退出按钮然后返回它。 Twitter就是这样做的,我认为这是一个很好的UI改进。

2 个答案:

答案 0 :(得分:1)

    $('.follow').click(function(){          
        if($(this).attr("class") == "follow"){
            $(this).one("mouseleave",function(){
                $(this).mouseover(function(){
                    var $this = $(this);
                    $this.html("Unfollow");
                }).mouseout(function(){
                    var $this = $(this);
                    $this.html("Following");
                });
            });
        }else{
            $(this).off('mouseover mouseout');
            $(this).html('follow');
        }
        $(this).toggleClass("follow following");
    });

例如:http://jsfiddle.net/z3t5r3ud/
试试这个。
我更喜欢使用CSS,但是出于某些原因你可能必须使用javascript。

答案 1 :(得分:0)

要模拟Twitter的UI以跟踪/取消关注用户,我建议您允许程序知道当前关注的状态。您可以使用变量或按钮上的data-属性来执行此操作。对于我在JSFiddle中的例子,我使用了一个变量来使它更快。

>> Live Example: JSFiddle

var isFollowing = false;
$(".following").click(function(){
    if(isFollowing == false) {
        isFollowing = true;
        $(this).html("Following");
    }
    else if (isFollowing == true) {
        isFollowing = false;
        alert("unfollowing!");
        $(this).html("Follow");
    }
});

$(".following").hover(
    function() {
        if (isFollowing == true) {
            $(this).html("Unfollow");
        }
    },
    function() {
        if (isFollowing == true) {
            $(this).html("Following");
        }
    }
);

-mbp