Применить функцию ко всем дивам в блоке

#javascript

Сразу скажу чтобы в дальнейшем не было вопросов. Вроде "А что так уже не делают?!,
разве нельзя просто сделать вот так?! и т.д". В js я полный нуб. И естественно сформировать
свой вопрос я не могу(Так сам бы нагуглил)  

В чем весь сабж. Есть код  



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

  
  


  
  





Сейчас все эффекты применяются только к первому диву vizitka(ко внутренним изображениям).
 А таких дивов на странице несколько. Как сделать, что бы функция применялась к каждому
image1,image2 Которые лежат в vizitka. Я думаю нужно id поменять на класс...НО нужно
что-то еще. Все мои попытки оказались тщетными(
    

Ответы

Ответ 1

Пробуйте 
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);
  });
});


Ответ 2

Сделал вот так.

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

$("div.vizitka").hover(function(){
    var $vizitka=$(this);
    $vizitka.find("img.image1").animate(
    {
        width:'0px',
        height:height+'px',
        opacity:0.5
    },400,function()
    {
        $vizitka.find("img.image2").animate(
        {
            width:width+'px',
            height:height+'px',
            opacity:1
        },400);
    }
    );
},function(){
    var $vizitka=$(this);
    $vizitka.find("img.image1").stop();
    $vizitka.find("img.image2").animate(
    {
        width:'0px',
        height:height+'px',
        opacity:0.5
    },400,function()
    {
        $vizitka.find("img.image1").animate(
        {
            width:width+'px',
            height:height+'px',
            opacity:1
        },400);
    });
});
});


Ответ 3

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


  vis = $('.vizitka');
  var i = 0;

  while(i < vis.length){

    var visOnly = $(vis.get(i));
    var b = visOnly.children('img');

    var margin  = $(b.get(0)).width()/2;
    var width   = $(b.get(0)).width();
    var height  = $(b.get(0)).height();
        $(b.get(0)).mouseover(function(){
                var self = $(this);
                self.stop().animate({width:'0px',
                    height: height + 'px',
                    marginLeft: margin +'px',
                    opacity:'0.5'},{duration:500});

                window.setTimeout(function() {

                    self.stop().animate({width: width + 'px',
                        height: height + 'px',
                        marginLeft: '0px',
                        opacity: '1'},{duration:500});
                },500);
        });

        $(b.get(1)).mouseout(function(){
                var self = $(this);
                self.stop().animate({width:'0px',
                    height: height +'px',
                    marginLeft: margin +'px',
                    opacity:'0.5'},{duration:500});

                window.setTimeout(function() {

                    self.stop().animate({width: width + 'px',
                        height: height + 'px',
                        marginLeft: '0px',
                        opacity:'1'},{duration:500});
                },500);
        });



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

    i++;
  }
})



  
  
  
  



  
    

      
      
    
    

      
      
    
    

      
      
    
    

      
      
    










Ответ 4

$(document).ready(function(){
//-------------------------
/*
*  @Cache------------------
*/
var margin,
    width,
    height;

var viz = $('.vizitka');
var i = 0;
//-------------------------

// viz.find('img').stop().css({
//     width:'0px',
//     height: height +'px',
//     marginLeft: margin +'px',
//     // opacity:'0.5'
//   });


var autoassignment = function(f){

        this.f = f;

        while(f > -viz.length){

              var vizOnly = $(viz.get( f ));
              var b = vizOnly.children('img');

              margin  = $(b.get(0)).width()/2;
              width   = $(b.get(0)).width();
              height  = $(b.get(0)).height();

              // mouseover ________________________________
              $(b.get(0)).mouseover(function(callback){

                          var self = $(this);

                          self.stop().animate({

                                  width:'0px',
                                  height: height + 'px',
                                  marginLeft: margin +'px',
                                  opacity:'0.5'

                          },{duration:500});

                          window.setTimeout(function() {

                                        self.stop().animate({

                                                width: width + 'px',
                                                height: height + 'px',
                                                marginLeft: '0px',
                                                opacity: '1'

                                        },{duration:500});

                          },500);
              });

              // mouseout ________________________________
              $(b.get(1)).mouseout(function(callback){

                          var self = $(this);

                          self.stop().animate({

                                  width:'0px',
                                  height: height +'px',
                                  marginLeft: margin +'px',
                                  opacity:'0.5'

                          },{duration:500});

                          window.setTimeout(function() {

                                      self.stop().animate({

                                              width: width + 'px',
                                              height: height + 'px',
                                              marginLeft: '0px',
                                              opacity:'1'

                                      },{duration:500});

                          },500);
              });

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

          f--;
        }
  };

  autoassignment( i );

}); //document ready