jquery从淡入淡出

我喜欢jQuery.fadeOut的所有东西，但我一直想做的（不必摆弄愚蠢的CSS）就是设置一个状态，从中淡出，然后再淡出

我所知道的就是：

$(".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中。

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

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

---

我找到了答案

我做了一点数学（这一个很有趣，因为我解决了它），这是我需要想出的最终函数。设置一个

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

<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>  

HTML:

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

<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>  

我刚把它改成：

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

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

谢谢你的回答，我希望这对其他人有所帮助。我以后会经常使用这个函数
你能在JSFIDLE中演示一个例子吗？我不知道你的意思。我想我误解了这个问题。你是说你想做这样的事吗？元素。fadeTo（element2）是的，所以，不是淡出，更改数据，淡入-只是从当前数据到下一个数据的平滑连续淡入？你在寻找这个：？不，因为这没有帮助-它只是淡入给定的不透明度-我想直接淡入一个div的内容到其他内容，没有淡出和淡入。好吧，在元素上有一个.hoverInfo类，将鼠标悬停到rel=”“中的数据，然后淡出到该类，而不是setInterval和multiple？这不是个坏主意，这样会更通用。唯一可能的事情是我会使用
data-
属性和
.data（）
方法来获取infoaha，我不知道这个特定属性。我现在遇到的问题是，文本需要右对齐，使用绝对元素时，我只能从右上角和左上角定位：s