Question

我正在使用JQuery动画图像。我正在使用按钮来激活动画。

这是我的代码：

$(document).ready(function(){
    $("#b1").click(function(){ // b1 is the id of button
        $(#img).animate({left: '+=20px'});   // img is the id of image
    });
});

我有五张图片，所以当我点击另一张图片时，我需要将其ID放入$(#img)而不是#img。所以第二张图片将被动画化。

我该怎么做？

Answer 1

听起来你需要：

$(document).ready(function(){

    // declare a variable to store the selected image
    var selected = null;

    // listen to clicks on all your images
    // note: might want to filter this down to your target images
    $("img").click(function(){
        // save the selected image
        selected = this
    });


    $("#b1").click(function(){
        // animate the selected image
        $(selected).animate({left: '+=20px'});
    });
});

我希望有所帮助！

Answer 2

您可以在点击时为图像指定一个“选定”类，然后为选定的动画添加动画：

$(document).ready(function() {

    $(".image").click(function() {
        // unselect others
        $(".image").removeClass("selected");
        // reselect this one
        $(this).addClass("selected");
    });

    $("#b1").click(function() {
        // animate selected
        $(".image.selected").animate({left:'+=20px'});
    });
});

HTML

<img class='image' src="image1"/>
<img class='image' src="image1"/>
<button id='b1'>click</button>

这也允许您设置所选图像的样式，例如：

.selected { border: 1px solid pink }

Answer 3

将类（如img_to_animate）添加到

等图像中

<img src='http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png' style="width:50px;height:50px;" class="img_to_animate" />
<img src='http://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png' style="width:50px;height:50px;" class="img_to_animate" />

的JavaScript

$(".img_to_animate").click(function(){      
   $(this).animate({left: '+=20px'});
})

Answer 4

如果选择了不同的图像，此版本会在按下按钮时将动画图像移回原始位置：

$('img').on('click', function() {
    $('img').removeClass("active");
    $(this).addClass("active");
});

$('input[type="submit"]').on('click', function() {
    if ( $(this).attr('data-current-image') !== $('img.active').attr('data-image-id') ) {
      $('img[data-image-id=' + $(this).attr('data-current-image') + ']').animate({left: '10'});
    }
    $(this).attr('data-current-image',$('img.active').attr('data-image-id'));
    $('img[data-image-id=' + $(this).attr('data-current-image') + ']').animate({left: '+20'});
  });

img { display: block; position: relative; margin-top: 10px; left: 10px; height: 50px; width: 75px; }
img.active { border-right: 3px solid #f90; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div><input type=submit data-current-image=0 value=" Animate! ">
    <img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=1 class="active" />
  <img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=2 />
  <img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=3 />
  <img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=4 />
  <img src='http://i.imgur.com/LCRO0jJ.jpg' data-image-id=5 />

通过单击图像将图像ID传递给JQuery

4 个答案: