CODEWITHSUNDEEP
jquery
Vijay Rahul
Vijay Rahul

Reputation: 103

How to access the different objects using jQuery?

I have developed some code for image sliding in which whenever a mouse event occurs I want the id of the other div except on which the mouse is present.

My code is:

$('#div1,#div2,#div3,#div4,#div5,#div6').mouseover(function () {
    $('#div1,#div2,#div3,#div4,#div5,#div6').css('width', '100px')
    $("." + $(this).data('class')).animate({                   
        'width':"400px",                   
    }, {
        'duration':1500,
        easing:'easeOutBack',
    })
});

Upvotes: 0

Views: 67

Answers (3)

Undefined
Undefined

Reputation: 11429

I would suggest altering this to use classes rather than ids. It would make your code much neater.

Give every element that you want to have this effect a class of animated and try this code instead.

$('.animated').mouseover(function () {
  $(this).removeClass('animated');
  $('.animated').css('width', '100px')
  $(this)
    .addClass('animated')
    .animate({                   
      'width':"400px",                   
    }, 1500);
});

Here is an example showing it in action. Although I don't think your code does what you want it to.

Upvotes: 1

Talha Akbar
Talha Akbar

Reputation: 10040

$( function() {
$("[id^=div]").mouseover( function() {
  var my = $(this).attr("id");
  var id = new Array;
  $("[id^=div]").each( function() {
    if($(this).attr("id") != my) {
       id.push($(this).attr("id"));
    }
  });
});
});

Working Fiddle or Demonstration

You can access each and every property.

I have taken all ids and added all ids to array id. You can access it further in your function.

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

Use .not to remove the hovered over div from the set of matched elements.

$('#div1,#div2,#div3,#div4,#div5,#div6').mouseover(function () {
    $('#div1,#div2,#div3,#div4,#div5,#div6').not(this).css('width', '100px')
    $("." + $(this).data('class')).animate({                   
                    'width':"400px",                   
                }, {
                    'duration':1500,
                    easing:'easeOutBack',
                })
    });

On a side note, it would be cleaner to use a class selector in this situation.

Upvotes: 0

Related Questions