如何在Wix代码中悬停在悬停的图像上

Question

当鼠标悬停在图像上并淡入图像时，WIX中需要什么代码使图像褪色并在鼠标不悬停在图像上时淡出？

我尝试使用此代码（以及其他类似代码），但它不起作用：

export function image4_mouseIn(event) {
  $w.onReady(function () {
   $w('#image4').onMouseIn( (Event) => {
    let fadeOptions = {
        "duration":   500,
        "delay":      500
    };
    $w("#image4").hide("fade", fadeOptions);
  } );
 });
}
export function image4_mouseOut(event) {
 $w.onReady(function () {
  $w('#image4').onMouseOut( (Event) => {
    let fadeOptions = {
        "duration":   500,
        "delay":      500
    };
    $w("#image4").show("fade", fadeOptions);
  } );
 }); 
}

Answer 1

您的代码有两个问题：

1）您正在一起创建事件处理程序。您可以从技术上使用这两种方法，但不能同时使用。

动态执行此操作（没有常规函数声明）：

$w.onReady(function () {
  $w('#image4').onMouseIn( (Event) => {
    let fadeOptions = {
      "duration":   500,
      "delay":      500
    };
    $w("#image4").hide("fade", fadeOptions);
  } );
  // show function here 
} );

静态地进行（没有现有的）

export function image4_mouseIn(event) {
  let fadeOptions = {
    "duration":   500,
    "delay":      500
  };
  $w("#image4").hide("fade", fadeOptions);
}

注意：您需要使用属性面板将此功能连接到按钮。

2）您无法在隐藏的图像上运行鼠标out事件。为了解决这个问题，您可以在图像后面添加一个盒子（盒子可以是透明的），并在盒子上创建一个再次显示图像的鼠标之路事件处理程序。

export function box1_mouseOut(event) {
  let fadeOptions = {
    "duration":   500,
    "delay":      500
  };
  $w("#image4").show("fade", fadeOptions);
}

Answer 2

您差点正确。在您的页面代码上，您应该有以下内容：

$w.onReady(function () {
   let fadeOptions = {
        "duration":   500,
        "delay":      500
    };      
    $w('#image4').onMouseOut( (Event) => {
      $w('#image4').show('fade', fadeOptions);
    } );
    $w('#image4').onMouseIn( (Event) => {
      $w('#image4').hide('fade', fadeOptions);
    } );
 }); 

Answer 3

完美工作尝试

$w.onReady(function () {
   let fadeOptions = {
        "duration":   500,
        "delay":      500
    };      
    $w('#image4').onMouseOut( (Event) => {
      $w('#image4').show('fade', fadeOptions);
    } );
    $w('#image4').onMouseIn( (Event) => {
      $w('#image4').hide('fade', fadeOptions);
    } );
 });