Jquery script работает в JSfiddle, но не на html странице

Я создал JSFiddle, который работает по назначению.Jquery script работает в JSfiddle, но не на html странице

//Jquery script 
function icon_hover() 
{ 
    $("#gcp-icon").hover(function(){ 
     $("#gcp-icon-hover").slideDown(); 
}, 
function(){ 
    $("#gcp-icon-hover").slideUp(); 
}); 
} 

icon_hover(); 


    //CSS 
.site_logo{ 
    width: 250px; 
    height: 250px; 
    background-color: rgba(0, 0, 0, 0.75); 
} 
.site_logo_hover{ 
    width: 250px; 
    height: 250px; 
    background-color:#000000; 
    opacity:0.6; 
    display:none; 
} 


#gcp-icon 
{ 
    background: url(http://i.imgur.com/soDjoS4.png) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.hover_title{ 
    color: white; 
    width: 220px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 80px; 
    font-weight: 600; 
    font-size: 11pt; 
    font-family: verdana; 
} 

.hover_text{ 
    color: white; 
    width: 245px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 25px; 
    font-family: verdana; 
    font-size:9pt; 
} 

.click_me{ 
    color: white; 
    width: 160px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 8px; 
    font-weight: 600; 
    font-size: 10pt; 
    font-family: verdana; 
} 

<!--HTML--> 
<div class="site_logo" id="gcp-icon"> 
<div class="site_logo_hover" id="gcp-icon-hover"> 
    <div class="hover_title" id="gcp-title">Grace Cook Photography</div> 
    <div class="hover_text" id="gcp-text">Simple, subtle, clean and good looking</div> 
    <div class="click_me">Click for more details</div> 
</div> 
</div>

Однако, как следует из названия, если это скопировать и вставить в HTML-страницу и открыть в веб-браузере see this, это не работает должным образом.

Я пробовал отлаживать. Javascript действителен, и все зависимости (например, Jquey.js и т. Д.) Доступны.

источник

2013-09-12 Adam

где скрипт помещается на странице ... в заголовке или в нижней части страницы –

Это помещенный в заголовок, перед тегом body, как вы можете видеть в источнике http://aljidy.co.uk/jstest.html. – Adam

Я только что скопировал и вставил источник из jsfiddle.net/draft в html-страницу, и он все еще не работает. – Adam

Проблема может быть, в jsfiddle сценария была выполнена на дом готовы (fiddle не работает за пределами йота готового обработчика) .... но на странице он не похож на том

В jsfiddle второй раскрывающийся список на панели LHS выбирает место, где будет добавлен скрипт, по умолчанию он добавляется как обработчик window.onload.

Так переместить вызов icon_hover к йот готовый обработчик

jQuery(function(){ 
    icon_hover(); 
})

Демо: Fiddle

источник

2013-09-12 03:12:56

Это сработало отлично. Большое вам спасибо – Adam

Поместите свой метод запуска привязок inside.document готов.

$(document).ready(function(){//your code here.});

Также проверьте наличие дублирующих элементов html с одинаковым идентификатором.

источник

2013-09-12 03:17:58 sudhAnsu63

Это также хорошо работает, спасибо. – Adam

$(document).ready(function() { 
    $("#gcp-icon").hover(
     function() { 
      $("#gcp-icon-hover").slideDown(); 
     }, 
     function() { 
      $("#gcp-icon-hover").slideUp(); 
     } 
    ) 
})

источник

2013-09-12 03:18:55

Это также хорошо работает. Спасибо – Adam

Если вы тщательно проверить на jsfiddle ... Когда вы выбираете вашу библиотеку JS (JQuery 1.10.1 в вашем случае) под этой опцией jsFiddle автоматически выбирает для вас OnLoad. Что это делает это помещает все ваши яваскрипта код в

$(window).load(function() 
{ 
    //yourcode from jsfiddle goes in here 
}

это будет загружать код JS, когда окно нагрузки.

источник

2013-09-12 03:23:50 Thanos

В этом случае это не сработает. – Adam

вы должны всегда использовать готовое событие, когда вы работаете на веб-странице ...

$(function(){ 
icon_hover(); 

});

источник

2013-09-12 05:23:49

$(document).ready(function(){icon_hover();});

источник

2013-09-12 05:31:46 Sasidharan

Jquery script работает в JSfiddle, но не на html странице

ответ

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