Prevenir refluxo ao usar jQuery UI efeito “tamanho”
https://stackoverflow.com/questions/1671633
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu tenho uma lista de imagens como esta:
<ul class='blah'>
<li><img src='...' /></li>
<li><img src='...' /></li>
<li><img src='...' /></li>
<li><img src='...' /></li>
</ul>
E eu tenho isso com estilo para exibir como uma lista horizontal, sem pontos de bala. Kinda de como o que você vê no GitHub para os seguidores (ver http://github.com/chrislloyd ). Eu estou usando jQuery e jQuery UI para fazer essas imagens maiores quando o usuário passa o mouse sobre ele. Aqui está o código que eu tenho até agora:
$(".blah img").hover(
function() {
$(this).effect("size",
{ to: { width: 64, height: 64 },
origin: ['top','center'], scale: 'content' });
},
function() {
$(this).effect("size",
{ to: { width: 32, height: 32 }, scale: 'content' });
});
Isso funciona bem enquanto ele está animando, mas uma vez uma imagem atinge seu tamanho máximo das outras imagens refluir (mover para fora do caminho). Alguma idéia de como fazer isso sem reflui alguma coisa?
Eu tentei variações de 'position: absolute;', 'position: relative', etc. nas imagens e o recipiente (o <ul>), mas ele realmente não faz qualquer diferença
Solução
Você poderia tentar algo como:
var pos = $(this).position();
$(this).css({ position: "absolute",
top: pos.top, left: pos.left, zindex:10 });
Isto irá manter a imagem de empurrar os outros, mas isso meio que tem o problema oposto de 'chupar' os outros em uma vez que está a ser posicionado fora do caminho.
Há uma boa bastante exemplo aqui de usar jQuery para realizar um efeito similar.
Este exemplo usa os itens da lista para classificar de reservar o espaço para as imagens. Nós flutuar os itens da lista à esquerda e espaço-los, posicionando-los 'relativa' e dando-lhes uma dimensão explícita. Em seguida, as imagens são posicionados 'absoluto' dentro do item da lista. Agora quando usamos jQuery para re-size nossas imagens, as outras imagens não re-fluxo desde o item da lista está agindo como um espaço reservado.
O exemplo também usa animado em vez de effect.size para um efeito mais limpa pouco.
Espero que isso ajude. Boa sorte.
Outras dicas
Aqui está a minha tentativa. I definir os itens da lista a ser posicionado em relação a manter as imagens posicionados absolutamente. Isso parece funcionar conforme especificou. O único problema é quando você desliza sobre todos eles rapidamente, todos eles animados. Eu diria que você gostaria de acrescentar algo lá para torná-lo que apenas um redimensiona a uma hora.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
li { position:relative; height:40px; width:40px; float:left; list-style:none; }
li img { position:absolute; top:0; left:0; height:32px; width:32px; border:1px solid #666; background:#eee; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".blah img").hover(
function() {
$(this).css("z-index", "2");
$(this).animate({
"height": "65px", "width": "65px", "top": "-16px", "left":"-16px"
}, "slow");
},
function() {
var that = this;
$(this).animate({
"height": "32px", "width": "32px", "top": "0", "left":"0"
}, "slow", "swing", function() { $(that).css("z-index", "1"); });
});
});
</script>
</head>
<body>
<ul class='blah'>
<li><img src='http://www.gravatar.com/avatar/116ed602629e00b79eae9af774398bb0?s=24&d=http%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-24.png' /></li>
<li><img src='http://www.gravatar.com/avatar/116ed602629e00b79eae9af774398bb0?s=24&d=http%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-24.png' /></li>
<li><img src='http://www.gravatar.com/avatar/116ed602629e00b79eae9af774398bb0?s=24&d=http%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-24.png' /></li>
<li><img src='http://www.gravatar.com/avatar/116ed602629e00b79eae9af774398bb0?s=24&d=http%3A%2F%2Fgithub.com%2Fimages%2Fgravatars%2Fgravatar-24.png' /></li>
</ul>
</body>
</html>
Se você usar a função 'animado' do jQuery em vez de "efeito", ele funciona muito bem (não refluir). Eu tentei o seguinte código no Firefox 3, Chrome e IE 8 e em todos os casos nada refluído. Aqui está a função:
$(".blah img").hover(
function() {
$(this).animate( {'width': 64, 'height': 64 });
},
function() {
$(this).animate( {'width': 32, 'height': 32 });
});
E aqui está a página inteira que eu usei para testar a função:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="../jquery.js" type="text/javascript"></script>
<script type="text/javascript" >
$(document).ready( function() {
$(".blah img").hover(
function() {
$(this).animate( {'width': 64, 'height': 64 });
},
function() {
$(this).animate( {'width': 32, 'height': 32 });
});
});
</script>
<style type="text/css" rel="stylesheet">
ul li {
float: right;
list-style: none;
}
</style>
</head>
<body>
<ul class='blah'>
<li><img src='../i32.jpg' /></li>
<li><img src='../i32.jpg' /></li>
<li><img src='../i32.jpg' /></li>
<li><img src='../i32.jpg' /></li>
</ul>
</body>
</html>
A resposta fácil é geralmente para encontrar um plugin jQuery existente que já faz o que quiser. Há um monte deles lá fora, e até mesmo se não é perfeito, pode adaptar ou aprender com ele para obter o resultado desejado.
Para fazê-lo sozinho, eu sugiro ter duas cópias da imagem: uma linha com a lista, e outra no topo que zooms em Dessa forma, o layout da lista não depende da imagem ampliada em tudo. .
código não testado, apenas pensando:
// on page load, process selected images
$(function () {
$('img.hoverme').each(function () {
var img = $(this);
var alt = $("<img src='" + img.attr('src') + "'/>");
img.after(alt);
alt.hide();
img.hover(function () {
var position = img.position();
alt.css({
position: "absolute",
top: position.top,
left: position.left,
width: 32,
height: 32
}).animate({
top: position.top - 16,
left: postion.left - 16,
width: 64,
height: 64
});
}, function () { });
alt.hover(function () { }, function () {
var position = img.position();
alt.animate({
top: position.top,
left: position.left,
width: 32,
height: 32
}, function () {
alt.hide();
}); // alt.animate
}); // alt.hover
}); // each
}); // $(
Quando o mouse passa sobre a imagem menor, o maior é criado pairando sobre ele, e imediatamente se expande no lugar. Quando as folhas do mouse na imagem maior, ele encolhe e depois desaparece.
Você precisa de uma função que faz o seguinte:
- paira usuário através de imagem
- As chamadas de função para clonar imagem e absolutamente posição no exato mesmo lugar imagem base como, mas uma camada em cima ($ (this) .clone () ...) (render o elemento clonado em algum lugar mais tarde no DOM)
- Faça a sua animação na imagem clonada
- em foco fora, inverter a animação, em seguida, remover o elemento clonado completamente. (.Remove ())
simples Pretty. Os outros elementos permanecerá intacta e não se mover.
Eu tenho um resultado ligeiramente melhor, definindo a origem de topo esquerda em vez de centro superior.
Mas caso contrário, é sobre o mesmo. Aqui está uma coisa para os outros a trabalhar em:
<html><head><title>HELL NO WE WON'T REFLOW</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
<script>
jQuery(function($) {
$('.blah img').each(function(){
var p = $(this).position();
$(this).css({top:p.top,left:p.left});
});
$('.blah img').each(function(){
//$(this).css({position:'absolute'});
});
$(".blah img").hover(
function() {
$(this).effect("size",
{ to: { width: 375, height: 91 },
origin: ['top','left'], scale: 'content' });
},
function() {
$(this).effect("size",
{ to: { width: 250, height: 61 }, scale: 'content' });
});
});
</script>
</head>
<body>
<ul class="blah">
<li><img src='http://sstatic.net/so/img/logo.png'/></li>
<li><img src='http://sstatic.net/so/img/logo.png'/></li>
<li><img src='http://sstatic.net/so/img/logo.png'/></li>
<li><img src='http://sstatic.net/so/img/logo.png'/></li>
</ul>
</body>
</html>
