jQuery动画根本不工作
以下是我的jQuery:jQuery动画根本不工作,jquery,html,Jquery,Html,以下是我的jQuery: $(".portfolioimages").mouseover(function(){ $(".title").animate({left:"170px"},250); console.log("this is working"); }) 这是我的html: <div class="portfolioimages"> <p class="slidetext title">TITLE</p>
$(".portfolioimages").mouseover(function(){
$(".title").animate({left:"170px"},250);
console.log("this is working");
})
这是我的html:
<div class="portfolioimages">
<p class="slidetext title">TITLE</p>
<p class="slidetext description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in convallis dolor. Ut ut eros justo. Nulla sem metus, bibendum et ultricies eget, vulputate tempor libero. Vestibulum ante ipsum primis in faucibus orci luctus et</p>
<img class="picture" id="commercialimage1" src="Project Images\\HarrisonHealthClinic\\Render 1-1.jpg">
</div>
标题
我想将“标题”文本滑动到右侧,但由于某些原因,它不起作用。我在那里放了console.log行来测试mouseover事件是否工作,但它甚至没有被调用。我在同一个js文件中有其他函数,它们工作得很好,它们也在同一个文档就绪函数下。我不明白为什么它不起作用。谢谢
.title是绝对定位的,而.porfolioimages是相对定位的,这是因为
left
-属性仅适用于具有位置:绝对的元素代码>。您可以使用marginleft
或padding left
进行此操作(两者看起来可能相同,但实际效果不同:margin
移动整个元素,padding
移动元素内的内容):
$(“.portfolioimages”).mouseover(函数(){
$(“.title”).css(“左边距”、“170px”);
})
标题
这是因为left
-属性仅适用于位置为绝对的元素代码>。您可以使用marginleft
或padding left
进行此操作(两者看起来可能相同,但实际效果不同:margin
移动整个元素,padding
移动元素内的内容):
$(“.portfolioimages”).mouseover(函数(){
$(“.title”).css(“左边距”、“170px”);
})
标题
这是一个简单的语法错误,一个对象不能有一个未标记的条目,虽然多维数组可以,但这与点无关,.animate()
此处将250
作为持续时间的普通参数传递
假设位置:相对:
$(“.portfolioimages”).mouseover(函数(){
$(“.title”).animate({
左:“170px”,
}, 250);
console.log(“这正在工作”);
});代码>
.title{
位置:绝对位置;
}
.portfolioimages{
位置:相对位置;
}
标题
这是一个简单的语法错误,一个对象不能有一个未标记的条目,虽然多维数组可以,但这与点无关,.animate()
此处将250
作为持续时间的普通参数传递
假设位置:相对:
$(“.portfolioimages”).mouseover(函数(){
$(“.title”).animate({
左:“170px”,
}, 250);
console.log(“这正在工作”);
});代码>
.title{
位置:绝对位置;
}
.portfolioimages{
位置:相对位置;
}
标题
1st-如果正如您所说,我在同一个js文件中有其他函数,并且这些函数工作正常,那么这意味着您包括了jquery
2nd-您有一个意外标记,
代码错误
3rd-正如我在评论中指出的那样
使用.animate({左:“170px”},250)代码>而不是
.animate({左:“170px”,250})代码>
4th-我认为没有必要使用mouseover
而是使用mouseenter
。。并使用mouseleave
返回默认位置
如果您有更多的portfolioimages
divs标题,下一个演示也会有所帮助
$(.portfolioimages”).on('mouseenter',function(){
$(.title”).not($(this.find(.title)).stop().animate({left:“0px”},250);
$(this).find(“.title”).stop().animate({left:“170px”},250);/-^-不-^-
console.log(“这正在工作”);
}).on('mouseleave',function(){
$(“.title”).stop().animate({left:“0px”},250);
})
正文*{
保证金:0;
填充:0;
}
.portfolioimages{
位置:相对位置;
}
.头衔{
位置:绝对位置;
排名:0;
左:0;
背景:红色;
颜色:#fff;
填充物:5px;
文本对齐:居中;
宽度:100px;
}
标题
标题