jQuery每次點擊更改背景

Question

我有一個關於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); 

}); 

我如何得到它的工作？

Answer 1

你錯過了一些東西，你沒有在div＃background2，而且你沒有設置你的點擊處理程序（在您提供的演示的jsfiddle）

jsFiddle Demo

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

Answer 2

這個怎麼樣：

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

}）;

編輯：「隊列：假」是這樣，它不會等待以前的動畫

Answer 3

正如其他人所說，你沒有足夠的#background2 DOM元素或者該元素設置處理。另外，如果您在沒有切換位置的情況下單擊它們，背景將相互重疊。也就是說，第二個背景將覆蓋第一個背景。除非你在每個事件處理程序中隱藏相反的背景。

像這樣（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); 
} 

Answer 4

我把使用data-attributes爲了簡化代碼，使其更有點重複使用不同的方法。 http://jsfiddle.net/kRjrn/222/

Answer 5

這並不明顯，你真的想要發生什麼，但如果期望的結果是，當你點擊任一鏈接它改變了背景圖像，淡入淡出過渡，我認爲它會更好通過更改背景的類來完成。我會做在這個叉形小提琴：

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功能我重構仍然感覺有點笨重，但它至少起作用。