问题
I am attempting to zoom-in and zoom-out out of a photo when a button is pressed, however I am unable to get the code to work properly I believe this is do to the way i have structured the zoom-out part of my code.
jQuery code:
$(".enlarge-photo").click(function(){
//photo - zoom-in
var $img = $(".image");
$img.stop().animate({
height: "365",
width: "269",
paddingRight: "12"},"fast");
},function(){
$img.stop().animate({
height: "265",
width: "169",
paddingRight: "0"},"fast");
});
This is the HTML I am using:
<figure>
<img class="image" src="img/basketball.jpg" width="169" height="265" border="0" alt="basketball dunk"/>
<figcaption>Laura Skelding/AMERICAN-STATESMAN</figcaption>
</figure>
<ul id="photo">
<li rel="nofollow"><a class="enlarge-photo" href="#" title="enlarge-photo">ENLARGE PHOTO</a></li>
</ul>
回答1:
Based on the fact you want a button to do it:
$("#zoom").button().click(function () {
var options = { height: "365", width: "269", paddingRight: "12"};
var myImage = $("#myImage");
if (myImage.hasClass("zoomed"))
{
options = {height: "265", width: "169"};
}
myImage.stop().animate(options,"fast");
myImage.toggleClass("zoomed");
});
Updated fiddle: http://jsfiddle.net/johnkoer/NhYtL/19/
来源:https://stackoverflow.com/questions/11904962/jquery-zoom-in-and-zoom-out-is-not-working