Jquery hover animate with jquery ui dialog

Question

У меня есть небольшая, но странная проблема, с моей анимацией, реализованной с помощью jquery и jquery UI. Вы можете увидеть простую рабочую демонстрацию ниже,

Проблема возникает, когда вы пытаетесь щелкнуть по кнопке «Click me» в занавесе и затем нажать «Закрыть» во всплывающем окне. Вы увидите как занавес, так и изображение. Ты знаешь почему?

Очень спасибо

$(document).ready(function() { 
 
    $('.box_product_image').hover(function() { 
 
     $('.box_up-down', this).stop().animate({ 
 
      bottom: '0px' 
 
     }, 300); 
 
     $('.box_product_arrow', this).fadeOut(300); 
 
    }, function() { 
 
     $('.box_up-down', this).stop().animate({ 
 
      bottom: '-96px' 
 
     }, 600); 
 
     $('.box_product_arrow', this).fadeIn(300); 
 
    }); 
 

 
    $(document).on('click', '#text', function() { 
 
     $("#dialog").dialog({ 
 
      height: 200, 
 
      width: 200, 
 
      modal: true, 
 
      closeText: "close" 
 
     }); 
 
    }); 
 
});

*, ul, ol { 
 
    border: 0 none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.box_product_border_image { 
 
    border: 1px solid #d9d9d9; 
 
    border-radius: 6px; 
 
    height: 120px; 
 
    overflow: hidden; 
 
    width: 150px; 
 
    margin: 50px; 
 
} 
 
.box_product_image { 
 
    float: left; 
 
    height: 120px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.box_up-down { 
 
    background-color: rgba(0, 0, 0, 0.8); 
 
    bottom: -96px; 
 
    height: 100%; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 150px; 
 
} 
 
.box_up-down > * { 
 
    color: #fff; 
 
    font-size: 11px; 
 
} 
 
.box_product_name { 
 
    font-weight: bold; 
 
    margin: 3px 0 0 10px; 
 
} 
 
.box_product_arrow { 
 
    height: 19px; 
 
    position: absolute; 
 
    right: 15px; 
 
    top: 3px; 
 
    width: 10px; 
 
} 
 
.box_product_desc { 
 
    margin: 5px 0 0 10px; 
 
} 
 
.box_product_desc ul { 
 
    font-size: 10px; 
 
    line-height: 10px; 
 
    list-style-type: none; 
 
} 
 
.box_product_desc ul li { 
 
    margin-bottom: 6px; 
 
} 
 
.box_product_desc ul li a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
#dialog { 
 
    background-color: rgba(0,0,0,0.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
 
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js" type="text/javascript"></script> 
 
<div class="box_product_border_image"> 
 
     <div class="box_product_image"> 
 
      <img width="150" height="120" src="http://www.microproject.com/wp-content/themes/NybergsMekVerstand/images/img03.png"> 
 
      <div class="box_up-down"> 
 
       <div class="box_product_name">Text</div> 
 
       <div class="box_product_arrow" style="display: block;"> 
 
        <img width="10" height="19" title="" alt="" src="http://tpgroupindia.com/images/arrow.png"> 
 
       </div> 
 
       <div class="box_product_desc"> 
 
        <ul> 
 
         <li> 
 
          <a href="#">Text</a> 
 
         </li> 
 
         <li> 
 
          <a href="#">Text</a> 
 
         </li> 
 
         <li> 
 
          <a id="text" href="#">Click me</a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
      
 
      
 
<div id="dialog"></div>

Answer 1

Я переписал код (JQuery, HTML и CSS) немного, взглянуть на скрипку. Корень ко всему злу, вероятно, потому, что ссылка остается на фокусе.

http://jsfiddle.net/006L4uof/5/

$('#text').on('click', function(e){ 
    $(this).blur(); //remove focus from clicked link 
    $('#dialog').dialog({ 
     height: 200, 
     width: 200, 
     modal:true, 
     closeText:"close" 
     }); 
    }); 

Позвольте мне знать, если он не работает должным образом.