div动画无法正常工作

Question

HTML

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="mystyle1.css">
  <title>hd images</title>
</head>

<body>
  <div id="top1">
    <div class="inside1">
      <div class="nested_inside1"> MY HAPPY PLACES </div>
    </div>
    <div class="inside2">
      <div class="nested_inside2"> CLUMSSY BEACHES
      </div>
    </div>
    <div class="inside3">
      <div class="nested_inside3"> REGULAR APPLES </div>
    </div>
    <div class="inside4">
      <div class="nested_inside4"> LUSTY BRUSHES </div>
    </div>
    <div class="inside5">
      <div class="nested_inside5"> ECSTATIC DIMENSIONS </div>
    </div>
    <div class="inside6">
      <div class="nested_inside6"> CURLY HILLS </div>
    </div>
    <div class="inside7">
      <div class="nested_inside7"> SHINY WATER </div>
    </div>
    <div class="inside8">
      <div class="nested_inside8"> COOL BOATS </div>
    </div>
    <div class="inside9">
      <div class="nested_inside9"> CRUNCHY CLUSHTERS </div>
    </div>
    <script type="text/javascript" src="myscript2.js"></script>
</body>

</html>

JavaScript的

$(document).ready(function() {
  $("#top1").on("hover", ".nested_inside", function() {
    $(this).animate({
      "top": "-10px"
    });
  });
});

Answer 1

由于您没有班级nested_inside但nested_inside1 ， ensted_inside2等等，因此无法工作，因此...您必须删除数字

对每个人都这样修改它：

<div class="inside7">
  <div class="nested_inside"> SHINY WATER </div>
</div>

并且您还需要在头部添加jquery：

<script src="path/to/jquery.js"></script>

像这样修改您的代码：

 $(document).ready(function() {
  $("#top1").on("mouseover", ".nested_inside", function() {
     $(this).animate({
    "top": "-10px"
    }); 
  });
 });

和你的CSS是这样的：

.nested_inside {
  position: relative;
}

工作提琴： https : //jsfiddle.net/jnb7p14o/2/

Answer 2

 <head>
 <script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script type="text/javascript" src="myscript2.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle1.css">
<title>hd images</title>
</head>

您需要将链接添加到<head>的jquery文件，然后再添加jquery文件。

Answer 3

这有两个固有的问题：

• .nested_inside添加位置：相对于.nested_inside以确保top属性起作用
• 悬停事件已从jQuery 1.8中删除。 如果您使用的是最新版的jQu​​ery，则需要将其替换为mouseenter和mouseleave并进行必要的动画处理

我根据其工作原理的假设添加了一个小提琴： https : //jsfiddle.net/fxmtz2yn/

$(document).ready(function() {

 $("#top1").on("mouseover mouseleave", ".nested_inside",function(evt) {
    var $el = $(this),
        top = $el;
    switch(evt.type) {
        case "mouseover": 
            $el.animate({
                "top": "-10px"
            });
            break;
        case "mouseleave": 
           $el.animate({
               "top": "0"
           });
           break;
    }   
  });
});

Answer 4

$(".nested_inside").hover( function(){
  $(this).animate({"top": "-10px"});
},function(){
 $(this).animate({"top":"initial"});
})

hover（）需要回调