2013-02-13 2 views
-1

Спасибо заранее и извините за мой английский. Я очень новичок в Javascript и jQuery. моя проблема в jsfiddle.net jquery не работает должным образом, я не знаю, где я ошибся.не удалось запустить jquery в jsfiddle.net

<div class="holidayHoneymoonContent"> 
     <div class="holidayHoneymoonContent1"> <span id="lblSource">Delhi<span> 
     <span>&nbsp;To&nbsp;</span> <span id="lblDest">Shimla</span> 

     </div> 
     <div class="holidayHoneymoonContent2"> 
      <div style="float:left; width:142px;"> <span id="PicDesc">nwind yourself as we take you on a holiday to thr...</span> 

      </div> 
      <div style="float:left; width:63px;"> 
       <img ID="Rupee2" alt="" src="rupees.png" Width="8px" Height="8px" style="margin-left:8px;" 
       /> <span id="PicPrice">10000</span> 

       <br /> <span>(per person)</span> 

      </div> 
     </div> 
     <div class="holidayHoneymoonBtn"> 
      <!--<img ID="Bookhere" onmouseover="bookHover(this)" onmouseout="bookOut(this)" 
      src="bookHereBtn.png" class="bookHereBtn1" />--> 
      <input id="inpBookHere" type="submit" value="Book Here" style="font-size:12px;width:80px;height:20px;" 
      /> 
     </div> 
    </div> 

вот мой Code in jsFiddle

+0

как ¨R прохождения BookID функционировать –

+0

Вы подсоединили кнопку отправки с обработчиками? Что-то вроде '$ ('# inpBookHere'). Mouseover (bookHover);' – Stephan

ответ

0

Try This

Ваш HTML

<html> 

    <head> 
     <title></title> 
    </head> 

    <body> 
     <div class="holidayHoneymoonContent"> 
      <div class="holidayHoneymoonContent1"> <span id="lblSource">Delhi<span> 
      <span>&nbsp;To&nbsp;</span> <span id="lblDest">Shimla</span> 

      </div> 
      <div class="holidayHoneymoonContent2"> 
       <div style="float:left; width:142px;"> <span id="PicDesc">nwind yourself as we take you on a holiday to thr...</span> 

       </div> 
       <div style="float:left; width:63px;"> 
        <img ID="Rupee2" alt="" src="rupees.png" Width="8px" Height="8px" style="margin-left:8px;" 
        /> <span id="PicPrice">10000</span> 

        <br /> <span>(per person)</span> 

       </div> 
      </div> 
      <div class="holidayHoneymoonBtn"> 
       <img ID="Bookhere" onmouseover="" onmouseout="" 
       src="bookHereBtn.png" alt="Image" class="bookHereBtn1" /> 
       <input type="submit" value="Book Here" style="font-size:12px;width:80px;height:20px;" 
       /> 
      </div> 
     </div> 
    </body> 

</html> 

Javascript

$(document).ready(function(){ 

    $('#Bookhere').mouseover(function() { 
     alert("entering"); 
     bookId=this; 
     $(bookId).parent().parent().animate({ 
      height: "109px", 
      top: "68px" 
     }, 200); 
     $(bookId).parent().stop(true, true); 
     $(bookId).parent().prev().prev(".holidayHoneymoonContent1").css("background", "#3FBA9E"); 
    }); 

    $('#Bookhere').mouseout(function() { 
     bookId=this; 
     $(bookId).parent().parent().animate({ 
      height: "80px", 
      top: "96px" 
     }, 200); 
     $(bookId).parent().prev().prev(".holidayHoneymoonContent1").css("background", "#FFA455"); 
    }); 

}); 

Проверить скрипку http://jsfiddle.net/ZT6nu/13/

0

1. Вы должны связать элемент с событием и функции, как этот

$(element).on('mouseover',function(){ 
//code here 
}); 

2. Вам нужно использовать document.ready поэтому функции вызываются так

$(document).ready(function(){ 

$(element).on('mouseover',function(){ 
//code here 
}); 

}); 

3. Вы должны передать это в функции парения, как этот

bookHover(this); 

Demo здесь http://jsbin.com/efopex/3/edit

+0

Привет Антон, спасибо, он работает нормально, но мне нужно, чтобы это изображение было статическим, не должно подниматься вверх ... возможно ли это – UiUx

+0

и обновлено то же самое , мне нужно, чтобы кнопка bookhere была статичной и не должна подниматься вверх, заранее спасибо http://jsfiddle.net/santosh_patnala/ZT6nu/29/ – UiUx

+0

вот так? http://jsfiddle.net/ZT6nu/36/ вам нужно иметь ту же самую верхнюю позицию в анимации – Anton

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