Как угасать исходное изображение, а затем исчезать на другом изображении?

Так что это мои коды Javascript, и в основном это то, что он делает, это изменение изображения на другое изображение в зависимости от того, какой цвет хочет пользователь или какое изображение (Panda или Dj) пользователь хочет.Как угасать исходное изображение, а затем исчезать на другом изображении?

Что я могу добавить, чтобы сделать старую картинку затухающей и новая картина затухает?

мой html может вызвать отображение изображений отлично, я просто понятия не имею, как добавить классный эффект.

<script type="text/javascript"> 
    function O(obj) 
    { 
     if (typeof obj == 'object') 
      return obj; 
     else 
      return document.getElementById(obj) 
    } 

    var head = "Dj" 
    var headcolor = "pink" 


     function headpink(){headcolor = "pink"; changehead();} 
     function headblue(){headcolor = "blue"; changehead();} 
     function headdefault(){headcolor = "default"; changehead();} 
     function headred(){headcolor = "red"; changehead();} 


     function DjHead(){head = "Dj"; changehead();} 
     function PandaHead(){head = "Panda"; changehead();} 


    function changehead() 
     { 
     if (head == "Dj") 
      { 
       if(headcolor == "pink"){headImagePath = 'head/DjPink.png';} 
       if(headcolor == "blue"){headImagePath = 'head/DjBlue.png';} 
       if(headcolor == "red"){headImagePath = 'head/DjRed.png';} 
       if(headcolor == "default"){headImagePath = 'head/DjDefault.png';} 
      } 
     if (head == "Panda") 
      { 
       if(headcolor == "pink"){headImagePath = 'head/PandaPink.png';} 
       if(headcolor == "blue"){headImagePath = 'head/PandaBlue.png';} 
       if(headcolor == "red"){headImagePath = 'head/PandaRed.png';} 
       if(headcolor == "default"){headImagePath = 'head/PandaDefault.png';} 
      } 

       O("head").src = headImagePath; 
     } 
     </script>

источник

2013-12-21 user3121403

Вы действительно должны подумать об использовании оператора if/else if или коммутатора –

Рассматривали ли вы использование переходов CSS? – pdoherty926

Я не знаком с css переходами, но, насколько мне известно, я могу только затухать и чередовать 2 чередующихся изображения с помощью css. Я не уверен, как это сделать с большим количеством изображений. – user3121403

Вы можете использовать JQuery fadeIn и fadeOut; эти функции позволяют показывать/скрывать элементы с эффектом

Пожалуйста, вместо некоторых аналогичных, если, рассмотрите инструкцию switch.

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Код (не проверено):

function O(obj) { 
    if (typeof obj == 'object') return obj; 
    else return document.getElementById(obj) 
} 

var head = "Dj" 
var headcolor = "pink" 
var headImagePath; 


    function headpink() { 
     headcolor = "pink"; 
     changehead(); 
    } 

    function headblue() { 
     headcolor = "blue"; 
     changehead(); 
    } 

    function headdefault() { 
     headcolor = "default"; 
     changehead(); 
    } 

    function headred() { 
     headcolor = "red"; 
     changehead(); 
    } 


    function DjHead() { 
     head = "Dj"; 
     changehead(); 
    } 

    function PandaHead() { 
     head = "Panda"; 
     changehead(); 
    } 


    function changehead() { 
     switch (head) { 
      case "Dj": 
       switch (headcolor) { 
        case "pink": 
         headImagePath = 'head/DjPink.png'; 
         break 
        case "blue": 
         headImagePath = 'head/DjBlue.png'; 
         break 
        case "red": 
         headImagePath = 'head/DjRed.png'; 
         break 
        case "default": 
         headImagePath = 'head/DjDefault.png'; 
         break 
       } 
       break; 
      case "Panda": 
       switch (headcolor) { 
        case "pink": 
         headImagePath = 'head/PandaPink.png'; 
         break 
        case "blue": 
         headImagePath = 'head/PandaBlue.png'; 
         break 
        case "red": 
         headImagePath = 'head/PandaRed.png'; 
         break 
        case "default": 
         headImagePath = 'head/PandaDefault.png'; 
         break 
       } 
       break 
     } 

     $(O("head")).fadeOut(700, function() { 
      $(this).attr('src', headImagePath).fadeIn(700); 
     }); 

    }

источник

2013-12-21 15:22:23

вся ваша голова * функции должны быть реорганизованы для использования только одной функции IMHO –

Спасибо за помощь, но есть одна проблема, если вы все еще можете мне помочь. Это то, что изображение исчезает, WHICH GREAT, но новый образ не исчезает. Внезапно пространство просто исчезает. – user3121403

Вы повторив себе много здесь, а не с помощью JQuery.

Почему не просто хранить параметры в объекте, как это:

var options = { 
    head: ['Panda', 'Default'] 
};

Тогда вы можете просто сделать:

var $head = $('#head'); 

var getHeadImage = function(){ 
    return '/head/' + options.head.join('') + '.png'; 
}; 

$head.fadeOut('slow', function(){ 
    $head.attr('src', getHeadImage).fadeIn('slow'); 
});

источник

2013-12-21 15:39:28

Почему не просто установить имена файлов в массиве, а затем использовать jQuery исчезать и исчезать?

источник

2013-12-21 16:56:44 PMG

Как угасать исходное изображение, а затем исчезать на другом изображении?

ответ

Смежные вопросы