从sql中的所有div ID中应用animate

Question

我的数据库中有一些数据'phpmyadmin'我选择了所有数据，但我想制作一些动画，当用户点击更多信息时它会增加宽度和高度但是当我这样做时它会动画第一个而不是全部 我做它我喜欢我需要一个用户选择的产品，但类同时使它全部动画，这里的代码

var $con = $('#con');
	var $conImage = $('#image');
	var $conLink = $('#link');
	var $conLink2 = $('#link2');
	
	$conLink.click(function(){
		$('#con2').css({'float' : 'left', 'margin':'= 10px 5px 5px 18.5px', 'width':'=250px', 'height':'=260px'});
        $con.animate({'height':'+=290px', 'width':'+=460px'},800);
        $conImage.animate({'height':'+=90px', 'width':'+=120px'},800);
		$con.css({position:'absolute'});
		$conLink.fadeOut(100);
		$conLink2.fadeIn(800);
    });
	$('#link2').click(function(){
		$('#con2').css({'float' : 'left', 'margin':'= 10px 5px 5px 18.5px', 'width':'=250px', 'height':'=260px'});
        $('#con').animate({'height':'-=290px', 'width':'-=460px'},800);
        $('#image').animate({'height':'-=90px', 'width':'-=120px'},800);
		$('#con').css({'float':'left'});
		$('#link2').fadeOut(800);
		$('#link').fadeIn(800);

<div id="con2">
	<div id="con">
		<img id="image" src="fish/'.$r['image_p'].'">
		<h3>'.$r['name_p'].'</h3>
		<button id="link">MORE INFO</button>
		<h4>Num Of Product :'.$r['id'].'</h4>
		<h4>Details: '.$r['details'].'<h4>
		<h4>Amount: 1GK</h4>
		<h4>Price: '.$r['price'].' P</h4>
		<button id="link2">HIDE INFO</button>
	</div>
</div>

我想在'con'中的所有框中应用所有动画，而不是先在

上应用

Answer 1

我不确定你究竟解释了什么，但我在你的代码中发现了一些问题并且我将其清理干净了一点。 请注意：

• jquery相对值宽度：＆＃34; = ...＆＃34;在css方法中没有什么特别的。它只对+ =和 - =有意义，因为它会增加和减少当前值。
• 你无法将像素分成两半18.5px毫无意义。只需选择18px或19px。浮动值如18.5在其他单位中有意义但不是像素（如果我错了，请任何人纠正我）

＆＃13;

＆＃13;

  $(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);
      });


    });


  });

＆＃13;

        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;

        }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;