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>

以下是我的jQuery:

$(".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>

标题

Lorem ipsum dolor sit amet,是一位杰出的建筑设计师。康瓦利斯多洛的菲塞勒斯。我爱你。他是一个自由的人,他是一个自由的人。虎口海狸(faucibus orci luctus et.)同侧前庭

我想将“标题”文本滑动到右侧,但由于某些原因,它不起作用。我在那里放了console.log行来测试mouseover事件是否工作,但它甚至没有被调用。我在同一个js文件中有其他函数,它们工作得很好,它们也在同一个文档就绪函数下。我不明白为什么它不起作用。谢谢


.title是绝对定位的,而.porfolioimages是相对定位的

,这是因为
left
-属性仅适用于具有
位置:绝对的元素。您可以使用
marginleft
padding left
进行此操作(两者看起来可能相同,但实际效果不同:
margin
移动整个元素,
padding
移动元素内的内容):

$(“.portfolioimages”).mouseover(函数(){
$(“.title”).css(“左边距”、“170px”);
})

标题

Lorem ipsum dolor sit amet,是一位杰出的建筑设计师。康瓦利斯多洛的菲塞勒斯。我爱你。他是一个自由的人,他是一个自由的人。虎口海狸(faucibus orci luctus et.)同侧前庭


这是因为
left
-属性仅适用于位置为
绝对的元素。您可以使用
marginleft
padding left
进行此操作(两者看起来可能相同,但实际效果不同:
margin
移动整个元素,
padding
移动元素内的内容):

$(“.portfolioimages”).mouseover(函数(){
$(“.title”).css(“左边距”、“170px”);
})

标题

Lorem ipsum dolor sit amet,是一位杰出的建筑设计师。康瓦利斯多洛的菲塞勒斯。我爱你。他是一个自由的人,他是一个自由的人。虎口海狸(faucibus orci luctus et.)同侧前庭


这是一个简单的语法错误,一个对象不能有一个未标记的条目,虽然多维数组可以,但这与点无关,
.animate()
此处将
250
作为持续时间的普通参数传递

假设
位置:相对

$(“.portfolioimages”).mouseover(函数(){
$(“.title”).animate({
左:“170px”,
}, 250);
console.log(“这正在工作”);
});
.title{
位置:绝对位置;
}
.portfolioimages{
位置:相对位置;
}

标题

Lorem ipsum dolor sit amet,是一位杰出的建筑设计师。康瓦利斯多洛的菲塞勒斯。我爱你。他是一个自由的人,他是一个自由的人。虎口海狸(faucibus orci luctus et.)同侧前庭


这是一个简单的语法错误,一个对象不能有一个未标记的条目,虽然多维数组可以,但这与点无关,
.animate()
此处将
250
作为持续时间的普通参数传递

假设
位置:相对

$(“.portfolioimages”).mouseover(函数(){
$(“.title”).animate({
左:“170px”,
}, 250);
console.log(“这正在工作”);
});
.title{
位置:绝对位置;
}
.portfolioimages{
位置:相对位置;
}

标题

Lorem ipsum dolor sit amet,是一位杰出的建筑设计师。康瓦利斯多洛的菲塞勒斯。我爱你。他是一个自由的人,他是一个自由的人。虎口海狸(faucibus orci luctus et.)同侧前庭


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

标题

Lorem ipsum dolor sit amet,是一位杰出的建筑设计师。康瓦利斯多洛的菲塞勒斯。我爱你。他是一个自由的人,他是一个自由的人。虎口海狸(faucibus orci luctus et.)同侧前庭

标题