Блог

Я пытаюсь сказать: «Если курсор находится над любым из приведенных ниже элементов, доведите высоту внутреннего элемента до середины родительского элемента».

Как только внутренний элемент будет перемещен на половину, я хотел бы иметь возможность перемещать мышь внутри и поперек обоих элементов без каких-либо изменений положения внешнего или внутреннего элементов.

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

Вот элементы:

 <div id="slide_back_1" class="slide_back float" style=" width: 100px; height: 100px; margin: 10px; background-color: black; overflow: hidden; ">
    <div id="slide_hide_1" class="slide_hide float" style=" width: 100px; height: 100px; margin-top: 100px; background-color: silver; "></div>
    <div class="clear"></div>
</div>
  

Я возился с различными jquery, включая .hover , .mouseover и .mouseout, без особого успеха.

ВОПРОС:

Как мне закодировать jquery для достижения этой функциональности, учитывая, что на одной странице их может быть несколько.

Любая помощь приветствуется, ребята…

Пожалуйста, посмотрите, хорошо ли я вас понял: http://jsfiddle.net/QfYHA/2 /

ОБНОВЛЕНИЕ: код также был скопирован сюда.

 $('.slide_back').hover(function() {
    var $this = $(this),
        height = $this.height(),
        $slideHide = $this.find('.slide_hide');

    $slideHide.stop()
              .animate({marginTop: height / 2   'px'}, 400);
}, function() {
    var $this = $(this),
        height = $this.height(),
        $slideHide = $this.find('.slide_hide');

    $slideHide.stop()
              .animate({marginTop: height   'px'}, 400);
});
  

Помогает ли это? http://jsfiddle.net/TqLUt/6 /

  $('.slide_back').mouseover(function() {
   $(this).find('.slide_hide').css('marginTop', '50px');
 });
 $('.slide_back').mouseout(function() {
   $(this).find('.slide_hide').css('marginTop', '100px');
 });