Wie ändere ich das Pfeilbild in jquery

Question

Ich möchte das Bild von links nach rechts mit Pfeiltaste Bild basierend animieren den Pfeil muss die Richtung ändern animieren. das ist der code den ich ausprobiert habe aber nicht richtig funktioniert hilfe !.

$(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

Vielen Dank im Voraus

Answer 1

Ein Ansatz besteht darin, die Animation über CSS zu behandeln und dann die Klasse für das Element über ein Skript umzuschalten.

Wenn Sie diesen Ansatz verwenden, ist es so einfach, mit Standard-JavaScript zu scripten, wie es ist, die jQuery-Bibliothek zu verwenden.

---

dieser Ansatz mit 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>

---

Dieser Ansatz Standard mit Hilfe von 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>

Answer 2

Ich glaube, ich udnderstand, ein varible mit intial Winkelgraden erstellen und dann Schleife

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

OR,

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

Hoffe, das ist es, was du meintest.