jQuery Zoom-in and Zoom-Out is not working

和自甴很熟 提交于 2019-12-25 18:31:14

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!