Question

我有 THIS在更改主div的宽度时动画另一个div。现在，我想切换图像。我怎样才能做到这一点？ HTML：

      <button id="showmenu" type="button"><img id="icon" src="http://www.rizwanashraf.com/wp-content/uploads/2010/04/twitter-bird-v2.jpg" /> </button>         
     <div id="sidemenu" class="sidemenu">
       <div id="innermenu" class="innermenu">
         <div class="sidebarmenu">
               This should go left
         </div>
       </div>
     </div>
     <div class="table">
         content
    </div>

jQuery的：

$(document).ready(function() {
$('#showmenu').click(function() {
var hidden = $('.sidebarmenu').data('hidden');
    if(hidden){
    $('.sidemenu').animate({
        width: '200px'
    },500);
    $('.table').animate({
        width: '300px'
    },500)
} else {
    $('.sidemenu').animate({
        width: '0px'
    },500);
     $('.table').animate({
        width: '500px'
    },500)
}
$('.sidebarmenu,.image').data("hidden", !hidden);

});
});

CSS：

  .sidemenu {
  float:left;
  overflow: hidden;
  width: 200px;
  height: 500px;
}
#icon{
height:20px;
width:30px;
}
.innermenu {    
  height: 100%;
  width: 200px;
  background: #bcc1cb;
}

.sidebarmenu {
height: 100%;
}

.table{
height:500px;
width:300px;
background:pink;
float:left;
left:20px;
z-index: 10;
}

Answer 1

将其放在您想要更改图像的位置

$('#icon').attr('src', 'YOUR IMAGE.jpg');

这将改变图像的SRC属性。

示例JSFiddle

Answer 2

您可以根据以下示例更改图像src，或者如果您想要更灵活，只需切换css类并在css中显示图像详细信息。

$(document).ready(function () {
$('#showmenu').click(function () {
    var hidden = $('.sidebarmenu').data('hidden'),
        icon = $(this).find("img#icon"),
        imageSrc = "http://www.rizwanashraf.com/wp-content/uploads/2010/04/twitter-bird-v2.jpg",
        imageAltSrc = "http://placekitten.com/32/32";

    if (hidden) {
        icon.attr("src", imageSrc);
        $('.sidemenu').animate({
            width: '200px'
        }, 500);
        $('.table').animate({
            width: '300px'
        }, 500)
    } else {
        icon.attr("src", imageAltSrc);
        $('.sidemenu').animate({
            width: '0px'
        }, 500);
        $('.table').animate({
            width: '500px'
        }, 500)
    }
    $('.sidebarmenu,.image').data("hidden", !hidden);

});

}）;

http://jsfiddle.net/a2v5J/33/

Answer 3

尝试$（'＃icon'）。src =点击事件中的新图片。

Answer 4

尝试

top.$('.sidemenu').toggle(function() {
   $(this).animate({ 
 width: '200px'     
   }, 500);

在切换div上更改图像

4 个答案: