1

メインのdivの幅を変更しながら、別のdivをアニメーション化するTHISがあります。今、私は画像を切り替えたいと思っています。どうやってやるの？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

画像を変更したい場所に配置します

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

これにより、画像の SRC 属性が変更されます。

例JSFiddle

于 2013-09-25T08:37:26.707 に答える