0

私はjQuery.fadeOut全体が好きですが、私が常にやりたいことは（愚かなCSSをいじることなく）、状態をFROMに設定してからtoにフェードすることです。

私が行う方法を知っているのはこれだけです：

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

もちろん、これは、.hoverTestオブジェクトのマウスを動かすと、＃mydivをfooにフェードし、マウスを外すと、バーにフェードします。

しかし、jQueryで実行できるようにしたいのは、フェードアウトを切り取り、divを変更し、方法論をフェードバックし、現在のdivをフェードする状態を設定することです。

これは可能ですか/誰かが方法を知っています/私が何を意味するのか理解していますか？:)

編集：

したがって、事実上、アニメーションを50％で一時停止すると、両方の状態（fromとto）が50％の不透明度で表示されます。これが行われていない場合は、誰かが行うか、jQueryに追加する必要があります。

4

2 に答える 2

0

次々とではなく、同時にフェードインとフェードアウトします。あなたの例では、fadeOutのコールバック関数で定義されているため、fadeOutが完了した後にのみfadeInが発生しました。

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

I found the answer!

I did a bit of maths (it was fun this one, because i solved it) And this is the eventual function I needed to come up with. Set an <a> tag with a class of hoverInfo and then the bar 'users' (or whatever you want to call it) will seemingly crossfade between the two with the new information being gathered from the 'rel' statement. Or data. or whatever. :P

js-fiddle: http://jsfiddle.net/8h5CW/

jQuery code:

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

After testing on my site, For some reason in the page that I wanted to use it on I had to reset the .LEFT each time, so instead of:

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

I just changed it to:

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

If anyone can think of a quicker, smarter way to do this, I would love to know about it.

Thank you for your answers, and I hope this helps somebody else. I shall be using this function alot in the future

于 2012-08-03T15:23:04.720 に答える