JQuery - Изменение CSS одного DIV

Question

У меня есть этот HTML код:

<div id="cont"> 
    <div class="us"></div> 
    <div class="us"></div> 
    <div class="us"></div> 
</div> 

и этот JS код:

$(".us").mouseenter(function() { 
    $(this).animate({marginRight: "10px"}, "fast"); 
}); 

Проблема состоит в том, что три элемента изменяются. Я пробовал его без cont DIV и отлично работает, только один элемент изменен, но мне он нужен. Кроме того, я попытался предоставить одиночные идентификаторы для DIV, но продолжает терпеть неудачу.

Answer 1

Проблема здесь в вашем коде CSS, потому что элементы div действуют как блок вместе, вы увеличиваете весь контейнер, добавляя margin, а другие тоже занимают место. Вы можете добавить это сделать каждый div добавить маржу:

.us { 
    float:right; 
    clear:right; 
} 

Ваш демо http://jsfiddle.net/6H8f4/14/

Answer 2

Существует много способов выбрать один элемент.

//the first one 
$(".us").first().mouseenter(function() { 
    $(this).animate({marginRight: "10px"}, "fast"); 
}); 

//the second one 
$(".us").eq(1).mouseenter(function() { 
    $(this).animate({marginRight: "10px"}, "fast"); 
}); 

//the third one 
$(".us:nth-child(3)").mouseenter(function() { 
    $(this).animate({marginRight: "10px"}, "fast"); 
}); 

Answer 3

Попробуйте это:

$(".us:first-child").mouseenter(function() { 
    $(this).animate({marginRight: "10px"}, "fast"); 
}); 

или

$(".us:last-child").mouseenter(function() { 
     $(this).animate({marginRight: "10px"}, "fast"); 
    }); 

или

$(".us:nth-child(index)").mouseenter(function() { 
     $(this).animate({marginRight: "10px"}, "fast"); 
    }); 

Answer 4

является this что вы хотели?

<div id="cont"> 
    <div class="us">asdfafsdf</div> 
    <div class="us">343464</div> 
    <div class="us">asdfdsfds</div> 
</div> 

JQuery

$('#cont').children(".us").each(function() { 
    $(this).mouseenter(function() { 
     $(this).animate({marginRight: "10px"}, "fast"); 
    }); 
}); 

Answer 5

сделал скрипку

$(".us").mouseenter(function() { 
    $(this).animate({'margin-right': 100}, "fast"); 
}); 

$(".us").mouseout(function() { 
    $(this).animate({'margin-right': 5}, "fast"); 
}); 

http://jsfiddle.net/QjL9J/1/

при использовании анимации установки Интс в качестве значения заставит их рх по умолчанию

также свойства css должны находиться в '' в анимированном объекте и писать фактическое свойство (margin-right not marginRight)

и это должно работать, вам не нужно вручную создавать каждый элемент, его выполнить в соответствии с капюшон с этим.