Latest web development tutorials

jQuery UI API - efectos de transferencia (efecto de transferencia)

categoría

efectos especiales (Efectos)

uso

Descripción: El elemento de contorno a otro elemento.

transfer

参数 类型 描述
className String 转移的元素将接收的参数化的 class 名称。
to String jQuery 选择器，要转移到的元素。

Cuando se trata de visualizar la interacción entre dos elementos es muy útil.

elemento de transferencia con ella misma, clase ui-effects-transfer , necesita otros estilos a ser definida por usted, por ejemplo, añadir un fondo o borde.

Ejemplos

Haga clic en el elemento verde transferirlo a otro elemento. 

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> efectos de transferencia (Transfer) Efecto de demostración </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Style>
  div.green {
    Anchura: 100px;
    altura: 80px;
    fondo: green;
    frontera: 1px solid negro;
    position: relative;
  }
  div.red {
    margin-top: 10px;
    Ancho: 50px;
    altura: 30px;
    fondo: rojo;
    frontera: 1px solid negro;
    position: relative;
  }
  .ui-effects-transferencia {
    frontera: 1px negro de puntos;
  }
  </ Style>
  <Script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ Head>
<Cuerpo>
 
<Div class = "green"> </ div>
<Div class = "red"> </ div>
 
<Script>
$ ( "Div") .click (function () {
  var i = 1 - $ ( "div") .index (este);
  $ (Este) .effect ( "transferencia", {a: $ ( "div") .EQ (i)}, 1000);
});
</ Script>
 
</ Body>
</ Html>