1

クリック イベントで 2 つの個別のプロパティを切り替えたい:

1) div 内の画像 -src属性の切り替え

2) div の絶対位置 -animate("top":"0px")ビットの切り替え

ここにHTMLがあります

<div id="emailme">
   <a id="email" href="mailto:xxx@gmail.com">xxx@gmail.com</a>
   <div id="emailmecopy">email me</div>
   <img id="emaildown"src="images/downbutton.png">
</div>

src の切り替えをソートしましたが、アニメーション ビットを切り替える方法がわかりません。

$("#emailme img").on({
      'click': function() {
        var src = ($(this).attr('src') === 'images/downbutton.png')
              ? 'images/upbutton.png'
              : 'images/downbutton.png';
            $(this).attr('src', src);   //THIS TOGGLES THE IMAGE SRC

            //BUT WHAT DO I PUT HERE TO TOGGLE ANIMATE BETWEEN ("top":"0px") and 
            //("top":"-50px") IN THE SAME CLICK??

                     }
});

どんな助けでも大歓迎です！

4

2 に答える 2

0

コードを少しリファクタリングすると、このようにすることができます。これがあなたが探していたものだと思います...

$("#emailme img").on({
  'click': function() {

    var $this = $(this);
    var src = $this.attr('src');
    var isUp = src === 'images/upbutton.png';
    var newSrc = 'images/'+ (isUp ? 'downbutton' : 'upbutton') +'.png';

    $this.attr('src', newSrc)
      .animate({ top: (isUp ? '-50' : '0') +'px' });

  }
});
于 2012-10-18T22:07:53.157 に答える
0 
if($("#emailme img").css('top') == '0px'){
  $("#emailme img").stop().animate({top:'-50px'},1000);
};
if($("#emailme img").css('top') == '-50px'){
  $("#emailme img").stop().animate({top:'0px'},1000);
};

これもチェックしてください：

$('body').on('click', '#emailme img', function (e){
  $(this).attr('src', $(this).attr('src')=='images/downbutton.png'?'images/upbutton.png':'images/downbutton.png');
  if($(this).css('top') == '0px'){
    $(this).stop().animate({top:'-50px'},1000);
  };
  if($(this).css('top') == '-50px'){
    $(this).stop().animate({top:'0pg'},1000);
  };
});
于 2012-10-18T22:10:57.410 に答える