JQuery Fadein () Movendo outros elementos CSS em Fadein ()

StackOverflow https://stackoverflow.com/questions/2814534

  •  26-09-2019
  •  | 
  •  

Pergunta

Acabei de aprender um jQuery para obter uma galeria de imagens básica em um site que estou criando para um hotel, mas atualmente não vai planejar. Eu o comprei para que as setas percorram as imagens (ainda sem animação), mas decidi que as setas deveriam desaparecer quando a imagem está pairada e desapareceu quando não, mas isso está bagunçando o CSS de alguma forma.

As flechas começam desaparecendo ligando: $('.arrowRight').fadeOut(0);$('.arrowLeft').fadeOut(0);

No início da função jQuery Ready ().

Isso é bom, mas quando você passa o mouse sobre a imagem e as setas desaparecem, a imagem muda para a direita e eu não sei por quê. Suponho que poderia ser porque a seta esquerda agora desaparecendo significa que está sendo empurrada por ela, mas a flecha tem o seguinte CSS:

position:relative;
top: -90px;
left: 25px;

Um elemento relativo deve ser capaz de alterar a posição de um elemento normal?

Se você precisar experimentá -lo, apenas pairasse sobre a imagem grande (espaço reservado) e eles pularão quando as setas desaparecerem e saltarão para trás quando desaparecerem.

Alguma idéia de por que isso está acontecendo? Eu sou um noob jQuery.

Aqui está um link para a página: Espaço temporário do hotel Beanssheaf

Obrigado pelo seu tempo,

Infinitifizz

Foi útil?

Solução

#imageContainer deveria: position:relative

arrowLeft deveria:

position:absolute;
top:90px;
left:5px;

Os elementos relativamente posicionados ocupam espaço em seu layout. Como suas flechas estavam relativamente posicionadas, elas aumentam as coisas quando aparecem.

Para posicionar as coisas para que isso não aconteça, os itens "no topo" da imagem precisam ser posicionados absolutamente. Isso significa que eles não fazem mais parte do fluxo do layout, mas estão "no topo" dele.

Os itens absolutamente posicionados precisam de um ponto de referência para o ponto de origem (0,0). Esses itens olham para o invólucro e subem a árvore HTML até encontrar o primeiro elemento relativamente posicionado para determinar seu ponto de origem. Se não houver, ele usa o <body> como o ponto de referência.

Porque estamos adicionando position:relative para imageContainer, o contêiner agora se torna o ponto de referência, permitindo que você posicione com precisão suas setas usando top: e left:.

Outras dicas

Porque o fadeOut() o método atribui none para o display propriedade do elemento.
tente mudar o elemento de destino position para absolute embrulhado por a relative elemento posicionado.

o .fadeOut() O método anima a opacidade dos elementos correspondentes. Quando a opacidade atinge 0, a propriedade de estilo de exibição é definida como nenhuma, portanto o elemento não afeta mais o layout da página.
-- Documentação da API

Parece que o hiperlink em torno da imagem é o que está empurrando tudo para a direita quando desaparece. Tente aplicar os estilos a isso em vez da própria imagem.

Eu sugiro obter o Firebug se você ainda não o usar, faz determinar por que algo está acontecendo muito mais fácil.

EDIT: Na verdade, é mais do que apenas isso. Jogue a posição relativa no ImageContainer e torne a posição de hiperlink absoluta.

Você está fazendo todo o cara errado :) você precisa fazer isso:

1) position:relative por #imageContainer

2) position:absolute por arrorLeft e arrowRight pais (então para links) e tentam brincar com eles com eles left e top.

Depois de fazer isso, você não terá nenhum problema em pular coisas na página :)

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top