1

我有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;
}
4

4 回答 4

1

您可以按照下面的示例更改图像 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/

于 2013-09-25T08:46:47.000 回答
1

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

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

这将改变图像的 SRC 属性。

示例JSFiddle

于 2013-09-25T08:37:26.707 回答
0

尝试 $('#icon').src = click 事件上的新图像。

于 2013-09-25T08:36:34.903 回答
0

尝试

top.$('.sidemenu').toggle(function() {
   $(this).animate({ 
 width: '200px'     
   }, 500);
于 2013-09-25T08:39:48.107 回答