如何在jquery中更改箭头图像

Question

我想根据动画箭头需要更改方向，使用箭头键图像为从左到右设置动画。这是我尝试的代码，但没有正常工作帮助！。

$(document).ready(function() {
  $(".FloorPlanArrow").click(function() {
    $(".pano-floorplan").animate({
      right: '-225px'
    }, 250);

    if (true) {
      $('.FloorPlanArrow').css({
        'transform': 'rotate(-180deg)'
      });
      $(".FloorPlanArrow").click(function() {
        $(".pano-floorplan").animate({
          right: '0px'
        }, 250);
      });
    } else {
      $('.FloorPlanArrow').css({
        'transform': 'rotate(180deg)'
      });
    }
  });
});

ArrowChange

提前致谢

Answer 1

我认为我没有理解，创建一个具有初始角度的变量，然后循环它

var angle = 0
while(angle <= 180){
   $(".floorPlanArrow").rotate(angle);
   angle++;
}

OR，

    $(".floorPlanArrow").rotate({bind:{
       click: function(){
        $(this).rotate({
          angle: 0,
          animateTo:180
      })
    }
  }
});

希望这就是你的意思。

Answer 2

一种方法是通过CSS处理动画，然后通过脚本在元素上切换类。

如果你采用这种方法，使用标准的javascript就像使用jQuery库一样容易编写脚本。

这种方法使用jQuery：

＆＃13;

＆＃13;

$('p').click(function(){
    $('p').toggleClass('reverse');
}); 

＆＃13;

p {
margin-top: 0;
display: inline-block;
font-size: 64px;
transition: transform 0.6s linear;
cursor: pointer;
}

p.reverse {
transform: rotateY(180deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Click the arrow...</h2>
<p>&larr;</p>

＆＃13;

＆＃13;

＆＃13;

这种方法使用标准的javascript：

＆＃13;

＆＃13;

var paragraph = document.getElementsByTagName('p')[0];

function reverseArrow() {
 paragraph.classList.toggle('reverse');
}

paragraph.addEventListener('click', reverseArrow, false);

＆＃13;

p {
margin-top: 0;
display: inline-block;
font-size: 64px;
transition: transform 0.6s linear;
cursor: pointer;
}

p.reverse {
transform: rotateY(180deg);
}

＆＃13;

<h2>Click the arrow...</h2>
<p>&larr;</p>

＆＃13;

＆＃13;

＆＃13;