0

我坚持我的淡入/淡出效果。

我可以让效果很好，这只是我遇到麻烦的停止/启动。我也试过stop()了，没有成功。

我正在使用的当前代码可以在这里找到：jsFiddle

我正在做的是检查是否div有特定的类，如果有，那么我正在淡入“共享”选项。这是hover()在 jQuery 中完成的。但是有一个问题，即“共享”链接必须与被hover()

对于那些需要这里的代码的人； jQuery

$("[name=fluid-success]").hover(function () {
    var id = $(this).attr('id');
    var button = $(this).find(".share" + id);
    if (button.length > 0) {
        button.fadeIn();
        //button.fadeOut();
    }
});

示例 HTML；

<div class="row-fluid" name="fluid-success" id="1">
    <div class="span9">a result</div>
    <div class="span3"> <a class="pull-right share1" style="display:none" href="#">Share<i class="icon-share"></i></a>
    </div>

老实说，我不太确定我是否走对了这条路。

4

4 回答 4

1

您可以通过为您的共享链接提供一个通用类，然后在您悬停的行中找到一个来简化事情。

$("[name=fluid-success]").hover(function () {
    $(this).find('.share').stop().fadeIn();
},
function () {
    $(this).find('.share').stop().fadeOut();
});

通过传递hover()两个函数参数，第一个处理 mouseenter 事件，而第二个处理 mousleeave。

在这两个实例中调用stop()将停止任何当前正在运行的动画，并将阻止效果队列的扩大

演示小提琴

于 2013-08-13T23:16:25.900 回答
1

你最好使用mouseenter和mouseleave

$("[name=fluid-success]").mouseenter(function () {
    var id = $(this).attr('id');
    var button = $(this).find(".share" + id);
    if (button.length > 0) {
        button.fadeIn();
        //button.fadeOut();
    }
}).mouseleave(function(){
//fadeout stuff
});

这是一个工作小提琴：http: //jsfiddle.net/jmYRP/7/

您可能还想研究管理事件队列http://api.jquery.com/clearQueue/或至少传递一个像这样淡入/淡出的速度.fadeIn(150)

于 2013-08-13T21:55:11.793 回答
1

您可以a使用选择器选择与您悬停的 div 具有相同父 id 的 div $('a', this)。jQuery 将如下所示：

$("[name=fluid-success]").hover(function () {
    if (($('a', this)).length > 0) {
        $('a', this).fadeIn(400);
    }
},

function () {
    $('a', this).fadeOut(400);
});

（我在淡入/淡出中添加了一个时间，以便您可以看到动画效果）。

你可以在这里看到它：http: //jsfiddle.net/jmYRP/8/

于 2013-08-13T22:00:43.980 回答
0

这是你的jsfiddle - 重做。我为此做了两个函数，它可以跨浏览器正常工作。

$("[name=fluid-success]").mouseenter(function () {
var id = $(this).attr('id');
var button = $(this).find(".share" + id);
if (button.length > 0) {
    button.fadeIn();
}
});

$("[name=fluid-success]").mouseleave(function () {
var id = $(this).attr('id');
var button = $(this).find(".share" + id);
if (button.length > 0) {
    button.fadeOut();
}
});

http://jsfiddle.net/95TAS/

于 2013-08-14T05:32:23.927 回答