Javascript div动画不工作jquery_Javascript_Jquery_Html

Javascript div动画不工作jquery

javascript jquery html

Javascript div动画不工作jquery,javascript,jquery,html,Javascript,Jquery,Html,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">

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>

这无法工作，因为您没有一个类

嵌套在内部，但是嵌套在内部1
，嵌入在内部2
。。。等等你必须删除这些号码
对每个人都这样做：
<div class="inside7">
  <div class="nested_inside"> SHINY WATER </div>
</div>

你的CSS是这样的：
 $(document).ready(function() {
  $("#top1").on("mouseover", ".nested_inside", function() {
     $(this).animate({
    "top": "-10px"
    }); 
  });
 });

.nested_inside {
  position: relative;
}

工作小提琴：

高清图像

您需要在
中添加jquery文件的链接，然后再添加jquery文件。
这有两个固有的问题：

CSS-Add位置：相对于.nested\u在中，以确保top
属性有效

已从中删除悬停事件。如果您使用的是最新版本的jQuery，则需要将其替换为mouseenter
和mouseleave
，并执行必要的动画

基于我对小提琴的工作原理的假设，我添加了一把小提琴：

hover（）需要一个回调事实上，我删除了它并将其更改为嵌套的，但它仍然不起作用我已经包含了链接仍然不起作用更新了我的答案，这应该对你有用。请点击投票并检查我的答案是否解决了您的问题；-）实际上，该文件没有工作..我试图在它之间插入一个警报，但警报没有显示出来..就像这个$（document）.ready（function（）{alert（“hello”）；…}）；我有一个附加的javascript文件，但它；它工作正常，但正如您所看到的，我提供的JSFIDLE工作正常，不是吗？因此，您必须根据我的建议调整您的代码。我已包含链接，但该链接仍不起作用。实际上，文件未起作用。我已尝试在链接之间插入警报，但未显示警报…如$（文档）。ready（function（）{alert（“hello”）；…}）；我有一个附加的javascript文件，但它；s正常工作实际文件未工作..我已尝试在它之间插入警报，但未显示警报..如$（文档）.ready（函数（）{alert（“hello”）；…..）；我有一个附加的javascript文件，但它；正常工作吗
 $(document).ready(function() {
  $("#top1").on("mouseover", ".nested_inside", function() {
     $(this).animate({
    "top": "-10px"
    }); 
  });
 });

.nested_inside {
  position: relative;
}

 <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>

$(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;
    }   
  });
});

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