/ / Borda pontilhada fica sólida se o objeto é animado com jQuery - jquery, border

A borda pontilhada fica sólida se o objeto é animado com jQuery - jquery, border

Eu tenho uma configuração simples: uma imagem e, em seguida, um parágrafo com um pouco de informação oculta e, em seguida, desliza sobre a imagem no foco do mouse. Se eu tentar aplicar um limite superior pontilhado ou pontilhado no parágrafo, ele simplesmente se transformará em uma linha sólida. Este é um problema conhecido com uma correção? Eu até tentei adicionar a borda pontilhada através do jQuery e ela ainda sai como uma linha sólida.

HTML:

<div class="wrap">
<img src="/images/images/fillertxt.jpg" alt="image" />
<img src="/images/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);
});
};

});

Respostas:

0 para resposta № 1

Eu não acho "border-top" irá trabalhar com animação. Eu sei que, para definir a largura da borda em animação, você tem que usar borderWidth não border-width. Então, por favor, tente usar da mesma forma. Espero que ajude :)


0 para resposta № 2

Não é possível reproduzir o que você descreve (usando o Opera).

Verifique esta demopage simples http://jsbin.com/ofoya

Por favor, forneça uma amostra de trabalho que reproduza o seu problema. E inclua informações sobre qual navegador você usa.

Btw. Você está ciente de que você definir o background-color e a border-color para o mesmo código de cor? Tente mudar border-top:3px dotted #8d9c0c; para p. border-top:3px dotted #FF0066;


0 para resposta № 3

O border-top funciona se você usa o jquery ui, mas precisa alterá-lo para "borderTop". Infelizmente, descobri que você tem que definir cada lado da fronteira

$(this).stop().animate({
backgroundColor: "#000",
borderRightColor: "#09c",
borderLeftColor: "#09c",
borderTopColor: "#09c",
borderBottomColor: "#09c"
}, "slow");