jQuery animation not working at all

Question

Here is my jQuery:

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

Here is my 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>

I want to slide the "TITLE" text to the right, but for some reason it's not working. I put the console.log line there to test if the mouseover event is working, but it's not even being called. I have other functions in the same js file and those work fine, they're both under the same document ready function too. I can't figure out why it isn't working. Thanks

.title is positioned absolutely while .porfolioimages is positioned relatively

Answer 1

1st- If as you said I have other functions in the same js file and those work fine, so this mean you include jquery

2nd- you have a Unexpected token , error with your code

3rd- as I pointed on comment

use .animate({left:"170px"},250); instead of .animate({left:"170px",250});

4th- I think no need to use mouseover use mouseenter instead .. and use mouseleave to return back to the default position

The next demo will also help if you have more of portfolioimages divs titles

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

Answer 2

It's a simple syntax error, an object cannot have a non-labeled entry, although a multidimensional array can, but that's beside the point, .animate() requires an object here with the 250 passed as a plain argument for duration.

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

That's because the left-attribute only works for elements with position:absolute;. You can either use margin-left or padding-left for this (both may look the same but actually have a different effect: margin moves the entire element, padding moves the content inside the element):

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

And if you use the 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>