0

我喜欢整个 jQuery.fadeOut 之类的东西，但我一直想做的（不摆弄愚蠢的 CSS）只是设置一个状态从 FROM 淡出，然后再淡入淡出。

我只知道该怎么做：

$(".hoverTest").hover(
function () {
    $("#user").fadeOut(100,function () {$("#mydiv").html('foo');}).fadeIn(); 
},
function() {
    $("#user").fadeOut(100,function () {$("#mydiv").html('bar');}).fadeIn(); 
            }
);

当然，这会在移动 .hoverTest 对象的鼠标时将 #mydiv 淡化为 foo，然后在鼠标移出时淡化为 bar。

但是我希望能够在 jQuery 中做的就是剪掉淡出、更改 div、淡入方法并设置一个状态以将当前 div 淡化为.

这可能/任何人都知道一种方式/理解我的意思吗？:)

编辑：

因此，实际上，如果您在 50% 处暂停动画，您会看到两种状态（从和到）都处于 50% 的不透明度。如果这还没有完成，那么应该有人这样做或将其添加到 jQuery 中。

4

2 回答 2

0

只需同时淡入和淡出，而不是一个接一个。在您的示例中，fadeIn 仅在fadeOut 完成后发生，因为它是在fadeOut 的回调函数中定义的。

$(".hoverTest").hover(
function () {
    $("#user").fadeOut(100)
    $("#mydiv").html('foo').fadeIn(); 
},
function() {
    $("#user").fadeOut(100)
    $("#mydiv").html('bar').fadeIn(); 
});
于 2012-08-03T15:02:18.310 回答
0

我找到了答案！

我做了一些数学运算（这很有趣，因为我解决了它）这是我需要提出的最终功能。设置一个<a>带有 class of 的标签，hoverInfo然后 bar 'users'（或任何你想称呼它的）似乎会在两者之间交叉淡入淡出，并从 'rel' 语句中收集新信息。或者数据。管他呢。:P

js小提琴：http: //jsfiddle.net/8h5CW/

jQuery代码：

$(".hoverInfo").hover(
    function () {
        var tmpInfo = $(this).attr("rel");
        $("#hoverInfo").css("display","none").html(tmpInfo);
        var dW = $("#defaultInfo").outerWidth();
        var hW = $("#hoverInfo").offset().left + $("#hoverInfo").outerWidth();
        var defX = $("#defaultInfo").position().left; 
        var newPos = (defX-(hW-dW));
        $("#hoverInfo").css("left",newPos+"px");
        $("#defaultInfo").fadeOut(1000);
        $("#hoverInfo").fadeIn(1000);
    },
    function() {
        $("#defaultInfo").fadeIn(1000);
        $("#hoverInfo").fadeOut(1000);
    }
);

HTML：

<div id="users" style="position: relative; display: block; border: 1px solid #00f; width: 500px; padding: 10px; height: 20px;">
    <span id="defaultInfo" style="position: relative; float: right;">
    I would like this to fade out yes.</span>
    <span id="hoverInfo" style="position: absolute;"></span>
</div>

在我的网站上进行测试后，出于某种原因，在我想在其上使用它的页面中，我不得不每次都重置 .LEFT，而不是：

$("#hoverInfo").css("display","none").html(tmpInfo);

我只是将其更改为：

$("#hoverInfo").css("left","0px").css("display","none").html(tmpInfo);

如果有人能想到一个更快、更聪明的方法来做到这一点，我很想知道。

感谢您的回答，我希望这对其他人有所帮助。我将来会经常使用这个功能

于 2012-08-03T15:23:04.720 回答