Пунктирная граница превращается в сплошную, если объект анимирован с помощью jQuery - PullRequest
Новая
       23

Пунктирная граница превращается в сплошную, если объект анимирован с помощью jQuery

1 голос
/ 17 декабря 2009

У меня есть простая настройка: изображение, а затем абзац с небольшим количеством информации, которая скрыта, а затем скользит по изображению при наведении курсора мыши. Если я попытаюсь применить верхнюю границу, пунктирную или пунктирную к абзацу, он просто превратится в сплошную линию. Это известная проблема с исправлением? Я даже попытался добавить пунктирную границу через jQuery, и она все еще выглядит как сплошная линия.

HTML: 

<div class="wrap">
    <img src="images/fillertxt.jpg" alt="image" />
    <img src="images/filler.jpg" class="front" alt="image" />
    <p class="info">
        This is a short description with a bit of text.
    </p>
</div>

CSS: 

.wrap .info {
    width:204px;
    height:50px;
    background:url(images/infobg.jpg) repeat-x #8d9c0c;
    color:#f7f5ef;
    padding:3px;
    position:absolute;
    top:142px;
    left:0;
    border-top:3px dotted #8d9c0c;
}

JS: 

$(document).ready(function(){
$("p.info").css("border-top","3px dotted #8d9c0c");
$(function(){
   bindTypeOne();
   $("input[type=radio]").click(function(){
      if ($(this).attr("rel") == "type1"){
         bindTypeOne();
      } else if ($(this).attr("rel") == "type2"){
         bindTypeTwo();
      }
   });
});

function bindTypeOne() { 
 $("div.wrap").hover(function(){
    $(this).children("p.info").stop();
    $(this).children(".front").stop().animate({"top":"141px"}, 400);        
   },function(){
    $(this).children("p.info").stop();
    $(this).children(".front").stop().animate({"top":"0"}, 700);
 });
};

function bindTypeTwo() {
  $("div.wrap").hover(function(){
   $(this).children(".front").stop();
   $(this).children("p.info").stop().animate({"top":"80px","border-top":"3px dotted #8d9c0c"}, 400);        
  },function(){
   $(this).children(".front").stop();
   $(this).children("p.info").stop().animate({"top":"142px"}, 700);
  });
};

});

Ответы [ 3 ]

0 голосов
/ 22 декабря 2009

Я не думаю, что "border-top" будет работать с анимацией. Я знаю, что для установки ширины границы в анимации вы должны использовать borderWidth, а не border-width. Поэтому, пожалуйста, попробуйте использовать аналогичным образом. Надеюсь, это поможет:)

0 голосов
/ 08 января 2015

border-top работает, если вы используете jquery ui, но вам нужно изменить его на "borderTop". К сожалению, я обнаружил, что вы должны определить каждую границу 

$(this).stop().animate({
    backgroundColor: "#000",
    borderRightColor: "#09c",
    borderLeftColor: "#09c",
    borderTopColor: "#09c",
    borderBottomColor: "#09c"
}, "slow");
0 голосов
/ 17 декабря 2009

Невозможно воспроизвести то, что вы описываете (используя Opera).

Проверить этот простой демопаг http://jsbin.com/ofoya

Пожалуйста, предоставьте рабочий образец, который воспроизводит вашу проблему. И включите информацию, какой браузер вы используете.

Btw. Знаете ли вы, что для background-color и border-color установлен одинаковый код цвета? Попробуйте изменить border-top:3px dotted #8d9c0c;, например. border-top:3px dotted #FF0066;

...