javascript – Apply a function to all divs in a block

Question:

I must say right away that there are no further questions. It’s like “Why don’t they do it like that ?!” In js, I'm a complete noob. And naturally I cannot form my question (I would google it myself)

What is the whole subject. There is a code

$(document).ready(function() {
  var margin = $("#image1").width() / 2;
  var width = $("#image1").width();
  var height = $("#image1").height();
  $("#image2").stop().css({
    width: '0px',
    height: '' + height + 'px',
    marginLeft: '' + margin + 'px',
    opacity: '0.5'
  });


  $("#reflection2").stop().css({
    width: '0px',
    height: '' + height + 'px',
    marginLeft: '' + margin + 'px'
  });
  $("#image1").mouseover(function() {
    $(this).stop().animate({
      width: '0px',
      height: '' + height + 'px',
      marginLeft: '' + margin + 'px',
      opacity: '0.5'
    }, {
      duration: 500
    });
    window.setTimeout(function() {
      $("#image2").stop().animate({
        width: '' + width + 'px',
        height: '' + height + 'px',
        marginLeft: '0px',
        opacity: '1'
      }, {
        duration: 500
      });
    }, 500);
  });
  $("#image2").mouseout(function() {
    $(this).stop().animate({
      width: '0px',
      height: '' + height + 'px',
      marginLeft: '' + margin + 'px',
      opacity: '0.5'
    }, {
      duration: 500
    });
    window.setTimeout(function() {
      $("#image1").stop().animate({
        width: '' + width + 'px',
        height: '' + height + 'px',
        marginLeft: '0px',
        opacity: '1'
      }, {
        duration: 500
      });
    }, 500);
  });
});
<div class="vizitka">
  <img id="image1" src="" />
  <img id="image2" src="" />
</div>
<div class="vizitka">
  <img id="image1" src="" />
  <img id="image2" src="" />
</div>

Now all the effects are applied only to the first vizitka div (to internal images). And there are several such divas on the page. How to make the function apply to each image1, image2 that are in vizitka. I think you need to change the id to the class … BUT you need something else. All my attempts were in vain (

Answer:

Try

var doNicely = function (this_) {
  var $imgs = $('img', this_),
  $img1 = imgs.eq(0),
  $img2 = imgs.eq(1);

  var margin =$($img1).width()/2;
  var width=$($img1).width();
  var height=$($img1).height();

  $($img2)
    .stop()
    .css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});

  $("#reflection2")
    .stop()
    .css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px'});

  $($img1).mouseover(function(){
      $(this)
        .stop()
        .animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
      window.setTimeout(function() {
        $($img2)
          .stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
      },500);
  });
  $($img2).mouseout(function(){
      $(this)
        .stop()
        .animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
      window.setTimeout(function() {
        $($img1)
          .stop()
          .animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
      },500);
  });
}

$(document).ready(function () {
  $('.vizitka').click(function () {
    doNicely(this);
  });
});
Scroll to Top