在jQuery中切換圖像和更改div大小

我有一個需要在背景圖像和大小之間切換的div。我能夠獲得最初（第一次）點擊以正確更改背景圖像和div大小，但是當我再次單擊它時，我無法將其恢復爲原始大小和背景圖像。任何人都可以向我解釋我需要做什麼？在jQuery中切換圖像和更改div大小

CSS

#navigation{ 
    position: absolute; 
    display: block; 
    float: right; 
    margin: 0; 
    top: 0; 
    right: 0; 
    width: 25px; 
    height: 100%; 
    background-image: url(../images/left.png); 
    background-repeat: no-repeat; 
    background-position: left; 
    z-index: 3; 
    background-color: green; 
}

$("#navigation").on("click", function(){ 
    if($(this).css("background-image", "url(images/left.png)")){ 
     $(this).css("background-image", "url(images/right.png)"); 
     $(this).animate({width: 100}, 350); 
    } 
    else{ 
     $(this).css("background-image", "url(images/left.png)"); 
     $(this).animate({width: 25}, 350); 
    } 
})

來源

2015-04-01 User

試試這個：

$("#navigation").on("click", function(){ 
    if($(this).css("background-image") == "url(images/left.png)"){ 
     $(this).css("background-image", "url(images/right.png)"); 
     $(this).animate({width: 100}, 350); 
    }else{ 
     $(this).css("background-image", "url(images/left.png)"); 
     $(this).animate({width: 25}, 350); 
    } 
});

但最好嘗試添加類

$("#navigation").on("click", function(){ 
     var ths = $(this); 
     if(ths.hasClass('bg-image-left')){ 
      ths.css("background-image", "url(images/right.png)") 
       .animate({width: 100}, 350) 
       .removeClass('bg-image-left'); 
     } else { 
      ths.css("background-image", "url(images/left.png)"); 
       .animate({width: 25}, 350); 
       .addClass('bg-image-left'); 
     } 
    });

來源

2015-04-01 20:35:29 MasqueradeCircus

最好的事情是使用addClass和removeClass。你需要創建兩個

我已經使用背景顏色，而不是使其可測試。

不同的CSS類別請參閱jsfiddle

來源

2015-04-01 21:32:05

在jQuery中切換圖像和更改div大小

回答

相關問題