javascript - 如何改变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

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

如果您确实采用这种方法，那么使用标准 javascript 编写脚本就像使用 jQuery 库一样简单。

<小时/>

这种方法使用 jQuery:

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

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

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

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

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

<小时/>

此方法使用标准 javascript:

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

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

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

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

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

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