jQuery Animation mit Zoom-In & verkleinern

Möchte ich animieren, ein logo mit jQuery automatisch, wenn die Seite geladen wird. Zuerst muss das Bild verkleinert und dann vergrößert und verändert es sich zu einem anderen Bild.Wie kann ich das mit jQuery? Bitte helfen Sie mir. Hier ist mein code:

JS:

$(document).ready(function() {
			
			$( "#minion" ).animate({
				height: '50%',
				width: '50%'
			}, 3000,
			function() {
				$( "#minion" ).animate({
					opacity: 0.5
				}, 1000,
				function() {
					$("#logo").html( $(".hiddendiv img, .hiddendiv div").clone() );
				});
			});

		});

CSS:

.hiddendiv {
    display: none;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="logo">
  <img id="minion" src="images/logo.png" />
</div>
            <div class="hiddendiv">
                <img src='images/logo-small.png' />
                <div>complete transformation</div>
            </div>

Dank

Ich habe versucht, wie diese. $(document).ready(function() { $("#logo img").animate({width: "50%", height: "50%"}, 'slow'); });
Ich habe auch versucht diese. Aber nach dem hinzufügen dieses Codes, wird das Bild nicht angezeigt. $("#logo img").toggle(function(){ $(this).animate({width: "50%"}, 'slow'); }, function(){ $(this).animieren({Breite: "20%"}, 'slow'); });
kann dies wird Ihnen helfen, jsfiddle.net/d7UjD/9
Danke. Aber ich habe gesehen, dieser code. Es funktioniert auf Maus-hover-und mouse-lassen Sie nur. Ich möchte das Bild ein-und ausgezoomt werden automatisch.
ya, ich denke, Sie brauchen, um es zu lösen für Ihre Bedürfnisse mit diesen alle jsfiddle.net/D7cn8
in deinem Titel fragst du für zoom-in und zoom-out, als in Ihrer Frage, die Sie Fragen, zum starten von Zoom-out und zoom-in... Wenn es Sinn macht, Sie tut es nicht bedeutet, es macht Sinn zu jemand anderem. Hat die animation benötigt eine Endlosschleife? Wenn ja, wie? Wenn nicht... naja ...Bitte Fragen Sie eine bessere Frage.
die Reihenfolge von Zoom-In und Zoom-Out-spielt keine Rolle. Ja die animation sollte in eine Endlosschleife. Die animation beginnt mit einem Bild hinein und heraus Zoomen oder heraus Zoomen und in, und dann endlich ein anderes Bild kommt mit einem text-tag Linie. Ist das geschleift werden kann, so dass es funktioniert in einer kontinuierlichen Weise.
2 Bilder oder mehr? Sie soll uns zeigen was haben Sie versucht, loop-Bildern. Als ich sehe, wie Sie versucht, nichts. Nur einige .animate() - logisch ist es nicht Schleife nichts. ALSO ist voll von solchen Fragen - ich Frage mich nur, wie Sie vermisste Sie alle...
es wäre nett von Ihnen, wenn Sie zum Beispiel zeigten Ihre besten Anstrengungen, die Sie machte looping-Bilder und als Sie schließlich fragte, wie die beiden zu verbinden - zoom eine Schleife. Bitte zeigen Sie einige code. Die beste, die Sie haben.
Dies ist, was ich bin. Ich bin nur ein Anfänger in jQuery. <div id="logo"><img src="images/logo.png" /></div>$(document).bereit(Funktion() { logoAnimate(); function logoAnimate(){ $('#logo img').css("cursor","pointer"); $('#logo img').animate({width: "50%", height: "50%"}, 'slow'); setTimeout(function() { $('#logo img').animate({width: "75%", height: "75%"}, 'slow'); }, 600, function() { logoAnimate(); }); } });

InformationsquelleAutor Aruna Jithin | 2015-08-09

Können Sie etwas tun, wie bei dieser Geige jsfiddle.net/d7UjD/9

<img id="zoomimg" src="http://www.google.com/images/srpr/logo3w.png"
width="144" height="48" border="0" />
$(document).ready(function(){
  $('#zoomimg').css("cursor","pointer");
  $('#zoomimg').animate({width: "50%", height: "50%"}, 'slow');

  setTimeout(function() {
    $('#zoomimg').animate({width: "28%"}, 'slow');
  }, 1000 ); 
});

Danke. Dies verhalf mir zu einem gewissen Grad.

InformationsquelleAutor django

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.