当页面加载不适用于特定网站时，jquery滑入？如何判断哪个版本的jquery适用于此站点？

Basically, I want a div box to slide in on the page when it loads. I tested it on other websites, and html previews, all of which have worked so far. It just seems to be that this specific website doesn't seem to like it, and I can't figure out why.

基本上,我想在加载时在页面上滑动div框。我在其他网站和html预览上进行了测试,所有这些预览到目前为止都有效。它似乎似乎是这个特定的网站似乎不喜欢它,我无法弄清楚为什么。

The HTML:

<div id="kitten">
<div class="banner">
bloop
</div>
</div>

The script:

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script>
$("div.banner")
.css("margin-left",-$(this).width()) 
.animate({
    marginLeft:0
}, 3000);
</script>

The CSS:

#kitten{
position:absolute;
width:100%;
height:920px;
top:0px;
left:0px;
background:white;
}

.banner{
position:fixed;
width:600px;
height:45px;
left: 0;
right: 0;
margin: auto;
background:black;
color:white;
text-align:center;
z-index:500;
}

I'm jut curious if the website has some sort of way of blocking it, or if I happen to be using the wrong installation of jquery(?) Is there any way to find out what version of jquery to use that will work on there.

我很好奇,如果网站有某种阻止它的方式,或者如果我碰巧使用错误的jquery安装(?)有没有办法找出哪个版本的jquery可以在那里工作。

NO. I do not OWN the site, it's just a profile page that I posted some code onto. I'm not "hosting" anything.

没有。我没有自己的网站,它只是我发布了一些代码的个人资料页面。我不是“托管”任何东西。

3 个解决方案

#1

First of all, you have to include jQuery library before that your js script

首先,你必须在js脚本之前包含jQuery库

perhaps, "$" <- this object used by other libs, you have to check this link. https://api.jquery.com/jquery.noconflict/

也许,“$”< - 其他lib使用的这个对象,你必须检查这个链接。 https://api.jquery.com/jquery.noconflict/

#2

Add JQuery library before your script so that $ can be identified.

在脚本之前添加JQuery库,以便可以识别$。

Eg:- <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

例如: -

If you are using WordPress, Please convert $ to 'jquery`

如果您使用的是WordPress,请将$转换为'jquery`

$(document).ready(function() {

jQuery(document).ready(function($){

#3

Try this, firstly load jquery before body closing tag</body>

试试这个,首先在正文结束标记之前加载jquery

<html>
<head></head>
<body>

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</body>
</html>

then, create in the same folder of your index.html a file called script.js that should look like this :

然后,在index.html的同一文件夹中创建一个名为script.js的文件,该文件应如下所示:

$( document ).ready(function() {
   $("div.banner")
     .css("margin-left",-$(this).width()) 
      .animate({
       marginLeft:0
    }, 3000);
});

Now include it in your html just after jquery:

现在将它包含在jquery之后的html中:

<html>
<head></head>
<body>

<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html

If still not working try, as @Arshid KV said, to change

如果仍然没有工作尝试,如@Arshid KV说,改变

$(document).ready(function() {

jQuery(document).ready(function($){

#1