Question

我在一个产品中应用了animate，它在代码中显示我想制作两个或更多产品，以便在用户点击更多信息时执行相同的动画

$(document).ready(function() {
    var fishPath = "http://upload.wikimedia.org/wikipedia/commons/7/77/Puffer_Fish_DSC01257.JPG";

    var $con = $('#con');
    var $con2 = $('#con2');
    var $conImage = $('#image');
    var $conLink = $('#link');
    var $conLink2 = $('#link2');

    $conImage.attr('src', fishPath);
    $conLink2.hide(); //hide second link immediately
    $conLink.click(function() {
        $con2.addClass('clicked');

        $con.animate({
          height: "+=290",
          width: "+=460"
        }, 800);
        $conImage.animate({
          width: 220
        }, 800);

        $(this).fadeOut(100, function() {
          $conLink2.fadeIn(800);
        });
    });

    //hide button
    $conLink2.click(function() {
      $con.removeClass('conClicked');

      $con.animate({
        height: "-=290",
        width: "-=460"
      }, 800);
      $conImage.animate({
        width: 150
      }, 800);

      $(this).fadeOut(800, function() {
        $conLink.fadeIn(800);
      });
    });
});

body {
    font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
#instructions {
    font-size: smaller;
    font-style: italic;
}
#image {
    width: 150px;
}
#con2 {
    display: inline-block;
    border: 1px solid red;
    padding: 10px;
}
.conClicked {
    margin: 10px 5px 5px 18px;
    width: 250px;
    height: 260px;
}
#con {
    border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="instructions">
  I have some data in my database 'phpmyadmin' i selected all data but i want to make some animation when user click more info it increase width and height but when i do so it animate the first only not all i make it Id cuz i need one product which user
  select but class make it all animated in the same time, here the code
</p>
<div id="con2">
  <div id="con">
    <img id="image" src="fish/'.$r['image_p'].'">
    <h3>'.$r['name_p'].'</h3>

    <h4>Num Of Product :'.$r['id'].'</h4>
    <h4>Details: '.$r['details'].'</h4>
    <h4>Amount: 1GK</h4>
    <h4>Price: '.$r['price'].' P</h4>

    <button id="link">MORE INFO</button>
    <button id="link2">LESS INFO</button>
  </div>
</div>

从这段代码中我想做多个产品，用户点击任何动画产品中的“更多信息”。

Answer 1

而不是使用按钮的id进行动画，请尝试使用class。你只需要每个产品一个按钮来做到这一点。试试这个jsfiddle http://jsfiddle.net/98rudLkc/

在sql的div ID组中应用animate

1 个答案: