1

我有一个关于 jQuery 动画的问题。每次单击都应更改背景图像。

这是我的例子，它不起作用：

http://jsfiddle.net/aldimeola1122/kRjrn/215/

    $(document).ready(function(){

    function deneme(){
    $('#background').animate({ opacity: 1 }, 3000);
    }
    function deneme2(){
    $('#background2').animate({ opacity: 1 }, 3000);
    }

    $("#deneme").click(deneme);
    $("#deneme2").click(deneme2);

});

我如何让它工作？

4

5 回答 5

3

那这个呢：

http://jsfiddle.net/hWgZ8/

$(document).ready(function(){

function deneme(){
    $('#background2').animate({ opacity: 0,queue:false }, 3000);
    $('#background').animate({ opacity: 1 ,queue:false}, 3000);
}
function deneme2(){
    $('#background').animate({ opacity: 0 ,queue:false}, 3000);
    $('#background2').animate({ opacity: 1 ,queue:false}, 3000);
}

$("#deneme").click(deneme);
$("#deneme2").click(deneme2);

});

编辑：“队列：假”是为了不等待上一个动画

于 2013-06-05T14:47:11.620 回答
1

我采用了一种不同的方法data-attributes来简化代码并使其更具可重用性。http://jsfiddle.net/kRjrn/222/

于 2013-06-05T14:49:58.787 回答
1

你错过了一些东西，你没有 div #background2，而且你没有设置你的点击处理程序（在你提供的 jsFiddle 演示中）

jsFiddle 演示

function deneme () {
    $('#background2').animate({ opacity: 0 }, 100);
    $('#background').animate({ opacity: 1 }, 3000);
}
function deneme2 () {
    $('#background').animate({ opacity: 0 }, 100);
    $('#background2').animate({ opacity: 1 }, 3000);
}

$("#deneme").click(deneme);
$("#deneme2").click(deneme2);
于 2013-06-05T14:41:54.833 回答
0

正如其他人所说，您没有#background2DOM 元素或该元素集的处理程序。此外，如果您在它们之间单击而不切换位置，则背景将相互重叠。也就是说，第二个背景将覆盖第一个。除非您在每个事件处理程序中隐藏相反的背景。

像这样（http://jsfiddle.net/kRjrn/221/）：

function deneme(){
    $('#background').animate({ opacity: 1 }, 3000);
    $('#background2').animate({ opacity: 0 }, 1000);
}
function deneme2(){
    $('#background2').animate({ opacity: 1 }, 3000); 
    $('#background').animate({ opacity: 0 }, 3000);
}
于 2013-06-05T14:49:21.343 回答
0

您实际上想要发生什么并不明显，但是如果所需的结果是当您单击任一链接时它会更改背景图像，并带有淡入淡出过渡，我认为最好通过更改类来完成的背景。我会像在这个分叉的小提琴中那样做：

http://jsfiddle.net/4JGmK/1/

改变CSS：

#background {
    opacity: 0;
    margin: 0;
    padding: 0;
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
}
.background1 {
    background-image: url("http://www.noupe.com/wp-content/themes/noupe/images/noupe-404.png");
}
.background2 {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/7/7b/Sdf_losc-benf_22.11.05_-_4.JPG");
}

改变了js：

$(document).ready(function () {
    $("#deneme").click(function(){deneme('background1', 'background2')});
    $("#deneme2").click(function(){deneme('background2', 'background1')});
});

function deneme(newclass, oldclass) {
    if ($('#background').hasClass(oldclass)) {
        //fade out the other background first then fade the right one in
        $('#background').animate({
            opacity: 0
        }, 3000, function () {
            $('#background').removeClass(oldclass).addClass(newclass).animate({
                opacity: 1
            }, 3000);
        });
    } else if($('#background').hasClass(newclass)) {
        //already got this background, don't do anything
        return false;
    } else {
        //doesn't have either at the moment, fade in the right background
        $('#background').addClass(newclass).animate({
            opacity: 1
        }, 3000);
    }
}

我重构的 deneme 函数仍然感觉有点笨拙，但至少它可以工作。

于 2013-06-05T15:15:11.667 回答