Question

我试图在点击时淡出块，然后改变块位置，并淡入。但它不起作用。这是代码：

$("#info-panel").fadeOut("fast");

$("#info-panel").css({
    top: (new pos),
    left: (new pos)
});

$("#info-panel").fadeIn("fast");

CSS：

#info-panel {
    display: none;
    position: absolute;
    background-color: #333;
    border: 1px solid #999;
    padding: 15px;
    max-width: 300px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0px 0px 10px #000;
    -moz-box-shadow: inset 0px 0px 10px #000;
    box-shadow: inset 0px 0px 10px #000;
    border: 3px solid #666666;
    z-index: 5;
}

Answer 1

尝试这样的事情：

$("#info-panel").fadeOut("fast", function() {
    $(this).css("color", "red"); //Use your CSS here, I did this as an example.
}).fadeIn("fast");

演示：http://jsfiddle.net/tymeJV/RPxrS/

Answer 2

您需要在此处使用回调功能：

$("#info-panel").fadeOut("fast", function () {
    $(this).animate({
        top: (new pos),
        left: (new pos)
    }, "fast", function () {
        // Animation complete.
        $(this).fadeIn("fast");
    });
});

DEMO HERE

Answer 3

通过css查看元素的定位方式：https://developer.mozilla.org/en-US/docs/Web/CSS/position?redirectlocale=en-US&redirectslug=CSS%2Fposition

在这个片段中对我来说很好用：

#info-panel {
    position:absolute
}

$("#moveme").click(function () {    
    $("#info-panel").fadeOut("fast");

    $("#info-panel").css({
        top: '80px',
        left: '70px'
    });
    $("#info-panel").fadeIn("fast");
});

小提琴：http://jsfiddle.net/IrvinDominin/GHXg3/

淡出，应用css，淡入 - JQUERY

3 个答案: