If statement involving this.indexof in order to animate an element not working

I have checked many of other questions involving issues like this, but none have helped. I'm very new to this so bare with my obvious lack of knowledge.

I was trying to create a navigation where once mouseenter on the navigation link itself, the nav link will be animated to rise up by 5px and a box of the same width would drop down to meet it in the middle. I can think of a way to do it but it will involve a lot more code than if i could use an if statement instead.

<div id="header" class="wrapper">
    <div id="header_logo" class="header"></div> 
    <div id="header_main" class="header"> 
        <div id="nav_drop_btn">
            <div id="nav_drop_box">
                <span id="1" class="nav_drop"></span>
                <span id="2" class="nav_drop"></span>
                <span id="3" class="nav_drop"></span>
                <span id="4" class="nav_drop"></span>
            </div>
            <span class="nav_btn">Home</span>
            <span class="nav_btn">About</span>
            <span class="nav_btn">Contact</span>
            <span class="nav_btn">Portfolio</span>
        </div>

$(".nav_btn").mouseenter(function(){
    $(this).animate({height:"25px",bottom:"0px"},400);
    if (this.indexOf("home") >=-1){$("#1").animate({height:"50px"})};
});

.nav_btn is the class for all of the navigation links. home is the navigation button in question.

I am pretty sure i have done this all wrong. so would very much appreciate if 开发者_JAVA技巧someone could help me to understand what is wrong with the If statement. the rest of my code works its just this.

home is text within the <span> for .nav_id, im trying to distinguish between which .nav_btn has been clicked to then activate another line of code to animate the corresponding top bar which comes down to meet it, this top bar containing an image for that particular navigation link

this does not represent a string value. If you're looking for a value to search with indexOf, and it's a link, you'll probably want to use this.href.indexOf instead.

<a href="/home/">Test</a>
<a href="/nothome/">Test 2</a>

$('a').mouseenter(function(){
    console.log(this.href.indexOf('/home'));
    if (this.href.indexOf('/home') !== -1) {
        console.log('Mouse enter home');    
    }
});

http://jsfiddle.net/kwPm6/

And you can use jQuery's .text() if you want to search the link's visible text node value:

<a href="/home/">Test</a>
<a href="/nothome/">Other</a>

$('a').mouseenter(function(){
    console.log($(this).text().indexOf('Test'));
    if ($(this).text().indexOf('Test') !== -1) {
        console.log('Mouse enter home');   
    }
});

http://jsfiddle.net/gJCp8/

And with SPAN's:

<span>Test</span>
<span>Other</span>

$('span').mouseenter(function(){
    console.log($(this).text().indexOf('Test'));
    if ($(this).text().indexOf('Test') !== -1) {
        console.log('Mouse enter home');    
    }
});

http://jsfiddle.net/gJCp8/1/

And as the other answer from N.G. suggests, you need to test for something NOT equal to -1, and additionally you might consider using .toLowerCase().indexOf('home') to normalize the string test value and search value casing.

To wit, just looking at your code and making these adjustments, I come up with this:

$(".nav_btn").mouseenter(function(){
    $(this).animate({height:"25px",bottom:"0px"},400);
    if ($(this).text().toLowerCase().indexOf("home") !== -1){
        $("#1").animate({height:"50px"});
    }
});

indexOf is not the correct function to use for this. You could give the home button a special class/id to allow it to behave differently on mouseenter.

$(".nav_btn").mouseenter(function(){
    $(this).animate({height:"25px",bottom:"0px"},400);
});

$("#home").mouseenter(function() { 
    $(this).animate({height:"50px"});
});

Your indexOf is checking against >= -1

This will always be true. -1 is the value returned if the search string is not found.

Perhaps you mean to check: if (this.indexOf("home") > -1) instead?