在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大小

回答

相关问题