Пытаясь сделать анимированную навигационную панель в JQuery

Я пытаюсь сделать панель навигации с JQuery. идея заключается в том, что вы нажимаете на кнопку навигации, и несколько ссылок (в виде div) будут выдвигаться. Однако я не могу заставить начальное действие щелчка работать. В настоящее время я просто пытаюсь переместить кнопку #Home влево на 100 пикселей после нажатия кнопки #clickme.Пытаясь сделать анимированную навигационную панель в JQuery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src = "jquery-2.0.1.js"></script> 
<script> 
$("#clickme").click(function(){ 
    $("#Home").animate({left: 100} , "fast"); 
}); 


</script> 
<style type="text/css"> 
#Nav { 
    position:absolute; 
    width:200px; 
    height:115px; 
    z-index:1; 
    top: 268px; 
    left: 530px; 
    background-color: blue; 
} 
.Button{ 
    position:absolute; 
    width:200px; 
    height:115px; 
    z-index:0; 
    background-color:#693; 
} 
</style> 
</head> 

<body> 
<div id="Nav"> 
    <div id="Home" Class = "Button">Home</div> 
    <div id="About" Class = "Button">About The Internship</div> 
    <div id="Meet" Class = "Button">Meet the Interns</div> 
    <div id="Request" Class = "Button">Request an Intern</div> 
    <div id="clickme" Class = "Button">Navigation</div> 
</div> 


</body> 
</html>

источник

2013-06-18 Jpm61704

Почему вы изобретать колесо. Там доступно множество плагинов меню. [Не все используют мышь] – epascarello

Вы должны ждать «до вашего йот готов + вам Неправильный селектор.

.id для классов (CSS)

#ID для фактических идентификаторов

$(function(){ 
    $("#clickme").click(function(){ 
    $("#Home").animate({left: 100} ,"fast"); 
    }); 
})

Это должно работать ..

источник

2013-06-18 13:04:19 Christian

Неверный идентификатор пользователя. Ваш код должен быть:

$("#clickme").click(function(){ 
    $("#Home").animate({left: 100} ,'fast'); 
});

это не должно вопрос, но сценарий тег должен иметь атрибут типа, так как вы не используете HTML5:

<script type="text/javascript" src="jquery-2.0.1.js"></script>

источник

2013-06-18 13:03:32 stackErr

Я сделал эту коррекцию, и она все еще работает неправильно. обновленный код выше – Jpm61704

попробуйте мое решение .. – Christian

@stackErr вам не хватает котировок $ ("# Home"). animate ({left: 100}, "fast"); – Praveen

проблема, как представляется, с селектором. Идентификатор должен быть использован с # не с .

попробовать

$("#clickme").click(function(){ 
    $("#Home").animate({left: 100} ,fast); 
});

Вы можете разместить этот код на дне перед тем </body> с использованием сценариев в нижней части страницы делает страницы быстрее & выполняется, когда дом готов. иначе оберните codde $(function())

источник

2013-06-18 13:05:13

В дополнение к ответу stackErr: «fast» должен быть передан как строка.

скрипку: http://jsfiddle.net/jonigiuro/xt57a/

$("#clickme").click(function(){ 
    $("#Home").animate({left: 100} ,'fast'); 
}

источник

2013-06-18 13:05:34

К сожалению, это не удалось! – stackErr

Пытаясь сделать анимированную навигационную панель в JQuery

ответ

Смежные вопросы