jQuery的動畫都

Question

這裏不工作是我的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> 

我想「標題」文本向右滑動，但由於某種原因它不工作。我將console.log行放在那裏以測試mouseover事件是否正常，但它甚至沒有被調用。我在同一個js文件中有其他的功能，並且工作正常，它們都在同一個文檔就緒函數下。我無法弄清楚它爲什麼不起作用。而.porfolioimages相對

Answer 1

這是一個簡單的語法錯誤，對象不能有非標記項，但一個多維數組就可以了，但在這裏，這是題外話，.animate()requires an object與250爲持續一個普通的參數傳遞。

假設position: relative：

$(".portfolioimages").mouseover(function() { 
 
    $(".title").animate({ 
 
     left: "170px", 
 
    }, 250); 
 
    console.log("this is working"); 
 
});

.title { 
 
    position: absolute; 
 
} 
 
.portfolioimages { 
 
    position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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=""> 
 
</div>

Answer 2

這是因爲left -attribute只適用於與position:absolute;元素定位感謝

.title僞絕對定位。您可以使用此margin-left或padding-left（二者可能看起來是一樣的，但實際上有不同的效果：margin移動整個元素，padding移動元素中的內容）：

$(".portfolioimages").mouseover(function() { 
 
    $(".title").css("margin-left", "170px"); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

如果你使用animate -function：

$(".portfolioimages").mouseover(function() { 
 
    $(".title").animate({marginLeft: "170px"}, 250); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

Answer 3

一號通如果像你說的我在同一個js文件等功能和那些做工精細，所以這意味着你的jquery包括

2nd-你有一個Unexpected token ,錯誤與您的代碼

3rd-我指出的 .animate({left:"170px",250});

4th-

使用.animate({left:"170px"},250);而不是在評論，我認爲沒有必要使用mouseover使用mouseenter代替..並使用mouseleave要返回到默認位置

接下來的演示也將幫助，如果您有更多的portfolioimages div的標題

$(".portfolioimages").on('mouseenter',function(){ 
 
    $(".title").not($(this).find(".title")).stop().animate({left:"0px"} ,250); 
 
    $(this).find(".title").stop().animate({left:"170px"} ,250);             //-^-not-^- 
 
    console.log("this is working"); 
 
}).on('mouseleave',function(){ 
 
    $(".title").stop().animate({left:"0px"} ,250); 
 
})

body *{ 
 
    margin : 0; 
 
    padding : 0; 
 
} 
 
.portfolioimages{ 
 
    position: relative; 
 
} 
 
.title{ 
 
    position : absolute; 
 
    top : 0; 
 
    left : 0; 
 
    background : red; 
 
    color: #fff; 
 
    padding : 5px; 
 
    text-align : center; 
 
    width : 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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> 
 
<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> 
 
<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>