上點擊

Question

移動DIV說我有這個佈局：

<div class='layout_theme'> 
    <a class='icon'> 
    <img class='example_one'> 
</div> 

<div class=layout_theme> 
    <a class='icon'> 
    <img class='example_two'> 
</div> 

<div class='file_uploader'> 
    <sample code...> 
</div> 

的想法是，當我點擊IMG「example_one」中，「.file_uploader」 DIV有權根據其移動。如果我有10個div'class'layout_theme，這個想法也適用。本質上，您單擊該div中的img，並在其下面彈出文件上傳。

這可能嗎？

Answer 1

玩你能做到這樣的：

$(".layout_theme").click(function(){ 

    $(".file_uploader").animate({ 
     left: $(this).offset().left - parseInt($(this).css("margin-left")) + "px", 
     top: $(this).offset().top + $(this).height() - parseInt($(this).css("margin-top")) + "px" 
    }) 
}); 

檢查它您在這裏：http://jsfiddle.net/zd78e8a3/1/

Answer 2

這裏有一個簡單的方法http://jsfiddle.net/xuatted6/

$('.layout_theme').on('click', function(){ 
     var offset = $(this).offset(); 
     $('.file_uploader').animate({top: offset.top + 20}, 500, function(){ 
      $(this).fadeIn(); 
     }); 
    }); 

你可以用效果:)