If else statement for changing color in css

Question

http://jsfiddle.net/alexruff/Vrxv9/3/

I have 2 buttons, one for vimeo one for youtube. Those buttons toggle the 2 videos with a right to left movement.

I want to highlight (change color) the youtube button when the youtube video is shown (marginLeft: '0'), and the vimeo button when the vimeo video is shown (marginLeft: '-1000px').

I tried using an if else statement but than nothing worked anymore.

Thanks for help.

JQuery:

$(document).ready(function(){

$('#vimeo_player_button').click(function(){
    $('#youtube_player').animate({
        marginLeft: '-1000px'
    });
});

$('#youtube_player_button').click(function(){
    $('#youtube_player').animate({
        marginLeft: '0'
    });
});    

var youtube = $('#youtube_player').animate({marginLeft: '0'});

if ('#youtube_player' = youtube) {
    $('#youtube_player_button').css('background-color': 'rgb(0, 0, 250)')
} else{
    $('#vimeo_player_button').css('background-color': 'rgb(0, 0, 250)')
};

});

Answer 1

My suggestion is to add a class active to your css:

.active {
    background-color: rgb(0, 0, 250);        
}

Then add activeclass to the clicked button as well as removing this class from other button:

$('#vimeo_player_button').click(function(){
    $('#youtube_player').animate({
        marginLeft: '-1000px'
    });
    $('.active').removeClass('active');
    $(this).addClass('active');
});

$('#youtube_player_button').click(function(){
    $('#youtube_player').animate({
        marginLeft: '0'
    });
    $('.active').removeClass('active');
    $(this).addClass('active');
});    

Updated Fiddle