How to use a jQuery code using JavaScript if/else statement

So I have these two very familiar jQuery code (fade in & out animation), however I want either one of those code to only work if it is required using an if/else statement.

I am aware there is no if/else statement for jQuery, but is there a way you can use JavaScript to call on a jQuery code using the if/else statement?

Here is what I want to do: I have a game, which attacks if a button is clicked, JavaScript runs an if/else statement and runs the Math.floor(Math.random() code. With a selection of numbers split into the if/else statement. When a condition is true in the if/else statement, a string will be printed(you won, or lost or a draw). But I also want a jQuery code to run, where an image fades in and out quickly. How do I do that?

function selectChanged() {
  attacks = document.getElementById("hits");
  if (attacks.value == "not_valid") {
    document.getElementById("battle").disabled = true;
  } else {
    document.getElementById("battle").disabled = false;
  }
}

function vvBattle() {
  var selection = document.getElementById("hits").value;
  var updatedSelection = selection.replace(/_/g, ' ');
  var youHit = Math.floor(Math.random() * 11);

  if (youHit >= 8) {
    document.getElementById("dragonGame").innerHTML = "You hit the bad guy with " + updatedSelection + " and won!";
  } else if (youHit > 5) {
    document.getElementById("dragonGame").innerHTML = "You nearly had it, but it wasn't enough, he's retreated!";
  } else {
    document.getElementById("dragonGame").innerHTML = "Your attack was too weak, you lost!";
  }
};

$(document).ready(function() {
  $(".gamePic").hide();
  $(".submit_button").click(function() {
    $(".gamePic").fadeIn('slow');
    $(".gamePic").fadeOut('slow');
  });
});       //I want the above JQ to execute when the condition "if" is true and the code below if "else is true.

$(document).ready(function() {
  $(".badGuy").hide();
  $(".submit_button").click(function() {
    $(".badGuy").fadeIn('slow');
    $(".badGuy").fadeOut('slow');
  });
});

img {
  width: 400px;
  height: auto;
}

<script src="http://ift.tt/1eH01Db"></script>
<div id="form">
  <form>
    <select name="hits" id="hits" value="Select" onchange="selectChanged()">
      <option value="not_valid">-- select an option --</option>
      <option value="attack1">attack1</option>
      <option value="attack2">attack2</option>
      <option value="attack3">attack3</option>
      <option value="attack4">attack4</option>
      <option value="attack5">attack5</option>
    </select>
    <br>
    <br>
    <input type="button" class="submit_button" id="battle" onclick="vvBattle()" value="Battle" disabled="disabled">
  </form>
  <p id="dragonGame" class="game1SectionGreen"></p>
</div>

<img class="gamePic" src="http://ift.tt/1TWicos" />
<img class="badGuy" src="http://ift.tt/1XHYjHt" />

My jQuery code isn't working here, not sure why, works on notepad ++.